/* GENERATED from design/tokens/design-tokens.json v1.0.0 — do not edit.
 * Regenerate: make tokens  (python website/build/build_tokens.py) */
:root {
  --brand-purple: #5B2D8E;
  --brand-purple-deep: #3C246C;
  --brand-purple-light: #8A5BC4;
  --brand-sky: #4AAEF7;
  --brand-sky-light: #A8D6FB;
  --brand-grass: #67A410;
  --brand-green: #1FA24A;
  --brand-yellow: #FFC61A;
  --brand-red: #E8412C;
  --brand-blue: #2E7FE8;
  --brand-pink: #F7A8C4;
  --sem-success: #1FA24A;
  --sem-warning: #F5A623;
  --sem-error: #D93A26;
  --sem-info: #2E7FE8;
  --bracelet-red: #E8412C;
  --bracelet-green: #1FA24A;
  --font-display: 'Baloo 2', Nunito, system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --font-ui: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --type-display-x-l-size: 32px;
  --type-display-x-l-weight: 700;
  --type-display-x-l-lh: 1.15;
  --type-display-l-size: 26px;
  --type-display-l-weight: 700;
  --type-display-l-lh: 1.2;
  --type-title-m-size: 20px;
  --type-title-m-weight: 600;
  --type-title-m-lh: 1.25;
  --type-body-l-size: 16px;
  --type-body-l-weight: 400;
  --type-body-l-lh: 1.5;
  --type-body-m-size: 14px;
  --type-body-m-weight: 400;
  --type-body-m-lh: 1.5;
  --type-caption-size: 12px;
  --type-caption-weight: 500;
  --type-caption-lh: 1.35;
  --type-amount-size: 24px;
  --type-amount-weight: 800;
  --type-amount-lh: 1.1;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  /* Breakpoints (design/tokens/design-tokens.json: breakpoints) — for JS
     matchMedia()/getComputedStyle() use only. A CSS custom property cannot
     appear inside an @media feature expression, so every literal max-width in
     this repo's admin CSS (640px / 1024px) must be kept in sync with these
     values BY CONVENTION. */
  --bp-sm: 640px;
  --bp-lg: 1024px;
  --radius-playful-card: 20px;
  --radius-playful-button: 16px;
  --radius-playful-chip: 999px;
  --radius-playful-input: 14px;
  --radius-playful-sheet: 28px;
  --radius-calm-card: 12px;
  --radius-calm-button: 10px;
  --radius-calm-chip: 8px;
  --radius-calm-input: 10px;
  --radius-calm-sheet: 16px;
  --elevation-card: 0 2px 12px rgba(59,36,108,0.08);
  --elevation-float: 0 8px 28px rgba(59,36,108,0.16);
  --motion-fast: 150ms ease;
  --motion-base: 250ms cubic-bezier(.2,.8,.3,1);
  --background: #FDFBFF;
  --surface: #FFFFFF;
  --surface-alt: #F4EEFB;
  --primary: #5B2D8E;
  --on-primary: #FFFFFF;
  --secondary: #4AAEF7;
  --text-primary: #2A1B3D;
  --text-secondary: #6E6480;
  --border: #E8E0F2;
  --bonus: #FFC61A;
  --gradient-hero-0: #5B2D8E;
  --gradient-hero-1: #8A5BC4;
  --gradient-hero: linear-gradient(120deg, #5B2D8E, #8A5BC4);
  --gradient-sky-0: #4AAEF7;
  --gradient-sky-1: #A8D6FB;
  --gradient-sky: linear-gradient(120deg, #4AAEF7, #A8D6FB);
  --calm-background: #F7F7FA;
  --calm-surface: #FFFFFF;
  --calm-sidebar: #1E1630;
  --calm-sidebar-text: #C9C2D8;
  --calm-primary: #5B2D8E;
  --calm-accent: #7A44B8;
  --calm-text-primary: #1F1A2E;
  --calm-text-secondary: #6B6880;
  --calm-border: #E4E2EC;
  --calm-table-stripe: #FAF8FD;
  --calm-surface-alt: #F0EDF6;
  --calm-on-primary: #FFFFFF;
  --ch1: #8A5BC4;
  --ch2: #D99A00;
  --ch3: #2E7FE8;
  --ch4: #E06C9F;
  --ch5: #5C9410;
  --heat-0: #F0EDF6;
  --heat-1: #D9C7EE;
  --heat-2: #B694DD;
  --heat-3: #8A5BC4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: #1A1226;
    --surface: #251A36;
    --surface-alt: #2F2244;
    --primary: #A87BE0;
    --on-primary: #241040;
    --secondary: #6FBFF9;
    --text-primary: #F2ECFA;
    --text-secondary: #B4A8C8;
    --border: #3C2D54;
    --bonus: #FFD24E;
    --calm-background: #141020;
    --calm-surface: #1E1830;
    --calm-sidebar: #0F0A1C;
    --calm-primary: #A87BE0;
    --calm-text-primary: #EFEAF8;
    --calm-text-secondary: #A79DBD;
    --calm-border: #332A48;
    --calm-sidebar-text: #C9C2D8;
    --calm-accent: #8A5BC4;
    --calm-table-stripe: #221A38;
    --calm-surface-alt: #282040;
    --calm-on-primary: #FFFFFF;
    --ch1: #A87BE0;
    --ch2: #B0850B;
    --ch3: #4585E8;
    --ch4: #D26397;
    --ch5: #649C26;
    --heat-0: #282040;
    --heat-1: #463263;
    --heat-2: #8A5BC4;
    --heat-3: #B694DD;
  }
}
:root[data-theme="dark"] {
  --background: #1A1226;
  --surface: #251A36;
  --surface-alt: #2F2244;
  --primary: #A87BE0;
  --on-primary: #241040;
  --secondary: #6FBFF9;
  --text-primary: #F2ECFA;
  --text-secondary: #B4A8C8;
  --border: #3C2D54;
  --bonus: #FFD24E;
  --calm-background: #141020;
  --calm-surface: #1E1830;
  --calm-sidebar: #0F0A1C;
  --calm-primary: #A87BE0;
  --calm-text-primary: #EFEAF8;
  --calm-text-secondary: #A79DBD;
  --calm-border: #332A48;
  --calm-sidebar-text: #C9C2D8;
  --calm-accent: #8A5BC4;
  --calm-table-stripe: #221A38;
  --calm-surface-alt: #282040;
  --calm-on-primary: #FFFFFF;
  --ch1: #A87BE0;
  --ch2: #B0850B;
  --ch3: #4585E8;
  --ch4: #D26397;
  --ch5: #649C26;
  --heat-0: #282040;
  --heat-1: #463263;
  --heat-2: #8A5BC4;
  --heat-3: #B694DD;
}