/* Generated by bin/rails style_sheet:sync from design/system/tokens.json. Do not edit. */
@font-face { font-family: Rubik; src: url("/assets/save_point/Rubik-latin-af0525ae.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: Rubik; src: url("/assets/save_point/Rubik-Italic-latin-5894fdd1.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: Nunito; src: url("/assets/save_point/Nunito-latin-a6de09cc.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }

:root {
  --sky: #eaf0ff;
  --sky-check: #dde6ff;
  --surface: #ffffff;
  --surface-sunken: #eef2fd;
  --line: #cdd7f6;
  --line-strong: #7085d6;
  --line-lip: #5468c0;
  --ink: #121c5e;
  --ink-muted: #4b5797;
  --ink-faint: #5c67a0;
  --knob: #ffffff;
  --gloss: #ffffffb3;
  --shade: #1b247014;
  --frame: #1b2470;
  --frame-track: #2f3a94;
  --frame-lip: #0e1450;
  --frame-muted: #b8c2f0;
  --on-frame: #ffffff;
  --logo-line: #0a2290;
  --logo-fill: #a9c9fa;
  --royal-hi: #4f6be0;
  --royal: #2f4bd0;
  --royal-line: #2840b8;
  --royal-lip: #1a2c8f;
  --on-royal: #ffffff;
  --royal-ink: #2a43c4;
  --royal-soft: #dfe6fc;
  --royal-glow: #2f4bd033;
  --gold-hi: #ffe58a;
  --gold: #ffc727;
  --gold-line: #e9a514;
  --gold-lip: #c47f08;
  --on-gold: #4a2300;
  --gold-ink: #8a5200;
  --gold-soft: #fff4cc;
  --copper: #c86018;
  --copper-ink: #a14a0d;
  --cream: #fff6dc;
  --bronze-hi: #f6b27a;
  --bronze: #dc8240;
  --on-bronze: #3a1600;
  --silver-hi: #ffffff;
  --silver: #c8d0ec;
  --on-silver: #2b3466;
  --mint-hi: #7ee8b2;
  --mint: #27bd78;
  --mint-line: #1aa064;
  --mint-lip: #127a49;
  --on-mint: #053a22;
  --mint-ink: #0d6b40;
  --mint-soft: #dbf7e9;
  --lime: #c6f03a;
  --coral: #ef4a68;
  --coral-ink: #b3213f;
  --coral-soft: #ffe2e7;
  --violet: #7b5cf0;
  --on-violet: #ffffff;
  --violet-ink: #5a3bd6;
  --violet-soft: #ece6ff;
  --shadow-soft: 0 10px 24px -8px #1b24704d;
  --focus-ring: 0 0 0 3px #ffffff, 0 0 0 6px #1a2c8f;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;
  --control-sm: 36px;
  --control-md: 48px;
  --control-lg: 56px;
  --icon-sm: 16px;
  --icon-md: 24px;
  --icon-lg: 36px;
  --content-max: 1120px;
  --prose-max: 640px;
  --slant: -12deg;
  --lip-depth: 4px;
  --press-depth: 3px;
  --font-display: "Rubik", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky: #0c1442;
    --sky-check: #111b55;
    --surface: #172163;
    --surface-sunken: #0f1850;
    --line: #2e3c8a;
    --line-strong: #6a7fd6;
    --line-lip: #0a1038;
    --ink: #f0f3ff;
    --ink-muted: #b0bbec;
    --ink-faint: #8f9bd2;
    --knob: #f0f3ff;
    --gloss: #ffffff40;
    --shade: #00000033;
    --frame: #070b2a;
    --frame-track: #1c2363;
    --frame-lip: #02041a;
    --frame-muted: #b9c3f2;
    --royal-hi: #4c68e6;
    --royal: #3550d4;
    --royal-line: #2c45c4;
    --royal-lip: #16236f;
    --royal-ink: #9db0ff;
    --royal-soft: #24318a;
    --royal-glow: #8aa2ff40;
    --gold-hi: #ffe27a;
    --gold: #ffc21f;
    --gold-line: #e0a010;
    --gold-lip: #8f5a00;
    --gold-ink: #ffd966;
    --gold-soft: #3d3110;
    --copper: #e07a30;
    --copper-ink: #ffa25a;
    --cream: #3a2a16;
    --mint-hi: #6fe0a8;
    --mint: #22b06e;
    --mint-line: #1a9a5e;
    --mint-lip: #0c5a35;
    --mint-ink: #7cf0b6;
    --mint-soft: #113f2e;
    --coral: #ff6f88;
    --coral-ink: #ff9aac;
    --coral-soft: #4a1628;
    --violet: #7356ea;
    --violet-ink: #c4b5ff;
    --violet-soft: #2e2266;
    --shadow-soft: 0 12px 28px -8px #000000a6;
    --focus-ring: 0 0 0 3px #0c1442, 0 0 0 6px #ffd23f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sky: #0c1442;
  --sky-check: #111b55;
  --surface: #172163;
  --surface-sunken: #0f1850;
  --line: #2e3c8a;
  --line-strong: #6a7fd6;
  --line-lip: #0a1038;
  --ink: #f0f3ff;
  --ink-muted: #b0bbec;
  --ink-faint: #8f9bd2;
  --knob: #f0f3ff;
  --gloss: #ffffff40;
  --shade: #00000033;
  --frame: #070b2a;
  --frame-track: #1c2363;
  --frame-lip: #02041a;
  --frame-muted: #b9c3f2;
  --royal-hi: #4c68e6;
  --royal: #3550d4;
  --royal-line: #2c45c4;
  --royal-lip: #16236f;
  --royal-ink: #9db0ff;
  --royal-soft: #24318a;
  --royal-glow: #8aa2ff40;
  --gold-hi: #ffe27a;
  --gold: #ffc21f;
  --gold-line: #e0a010;
  --gold-lip: #8f5a00;
  --gold-ink: #ffd966;
  --gold-soft: #3d3110;
  --copper: #e07a30;
  --copper-ink: #ffa25a;
  --cream: #3a2a16;
  --mint-hi: #6fe0a8;
  --mint: #22b06e;
  --mint-line: #1a9a5e;
  --mint-lip: #0c5a35;
  --mint-ink: #7cf0b6;
  --mint-soft: #113f2e;
  --coral: #ff6f88;
  --coral-ink: #ff9aac;
  --coral-soft: #4a1628;
  --violet: #7356ea;
  --violet-ink: #c4b5ff;
  --violet-soft: #2e2266;
  --shadow-soft: 0 12px 28px -8px #000000a6;
  --focus-ring: 0 0 0 3px #0c1442, 0 0 0 6px #ffd23f;
  color-scheme: dark;
}