/* Generated from design/tokens.json by design/generate_ui_assets.py. Do not edit. */
@font-face {
  font-family: "Baloo 2";
  src: url("/fonts/Baloo2-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("/fonts/Baloo2-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("/fonts/Baloo2-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Material Symbols Rounded";
  src: url("/fonts/MaterialSymbolsRounded.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}

:root {
  color-scheme: light;
  --page: #FFF9EE;
  --surface: #FFFFFF;
  --surface-muted: #F3EDFF;
  --text: #231A4D;
  --text-secondary: #57508A;
  --accent: #5B3FD9;
  --accent-strong: #4127B5;
  --accent-soft: #E7E0FF;
  --on-accent: #FFFFFF;
  --secondary: #FFB703;
  --on-secondary: #231A4D;
  --danger: #C8233F;
  --success: #137A4B;
  --warning: #A45200;
  --hairline: #DCD3F5;
  --tab-icon: #7A72A8;
  --chrome: #FFFFFF;
  --chrome-veil: rgba(255, 255, 255, 0.80);
  --tab-bar-fill: #FFFFFF;
  --shadow: rgba(91, 63, 217, 0.18);
  --hero-deep: #5B3FD9;
  --hero-mid: #FF5FA8;
  --hero-mist: #FFD166;
  --on-hero: #FFFFFF;
  --focus: #0F7BD8;
  --crayon-red: #FF5A5F;
  --crayon-orange: #FF8C2B;
  --crayon-yellow: #FFC93C;
  --crayon-green: #2EC27E;
  --crayon-blue: #3AA0FF;
  --crayon-pink: #FF6FB5;
  --crayon-teal: #14C2B3;
  --crayon-purple: #B39DFF;
  --on-crayon: #231A4D;
  --font-2xs: 12px;
  --font-xs: 14px;
  --font-sm: 16px;
  --font-md: 18px;
  --font-lg: 22px;
  --font-xl: 28px;
  --font-2xl: 36px;
  --font-3xl: 48px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-input: 6px;
  --radius-button: 10px;
  --radius-panel: 14px;
  --radius-sheet: 20px;
  --radius-kid: 24px;
  --touch-standard: 44px;
  --touch-kid: 64px;
  --elevation-rest: 0 1px 2px rgba(91, 63, 217, 0.10);
  --elevation-raised: 0 4px 14px rgba(91, 63, 217, 0.16);
  --elevation-float: 0 12px 32px rgba(91, 63, 217, 0.22);
  --font-family: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --focus-width: 3px;
  --focus-offset: 2px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #160F33;
  --surface: #241A4D;
  --surface-muted: #30255F;
  --text: #FBF7FF;
  --text-secondary: #CFC5F2;
  --accent: #A58CFF;
  --accent-strong: #C2B2FF;
  --accent-soft: #3B2E7A;
  --on-accent: #160F33;
  --secondary: #FFC93C;
  --on-secondary: #160F33;
  --danger: #FF7C8E;
  --success: #4FE0A0;
  --warning: #FFB65C;
  --hairline: #43387A;
  --tab-icon: #A79DD6;
  --chrome: #1D1541;
  --chrome-veil: rgba(29, 21, 65, 0.80);
  --tab-bar-fill: #1D1541;
  --shadow: rgba(0, 0, 0, 0.45);
  --hero-deep: #3A2A92;
  --hero-mid: #E04B9A;
  --hero-mist: #FFC93C;
  --on-hero: #FFFFFF;
  --focus: #FFD24D;
  --crayon-red: #FF7378;
  --crayon-orange: #FFA048;
  --crayon-yellow: #FFD45A;
  --crayon-green: #45DD97;
  --crayon-blue: #5CB3FF;
  --crayon-pink: #FF8AC6;
  --crayon-teal: #2EE0CF;
  --crayon-purple: #A98BFF;
  --on-crayon: #160F33;
  --elevation-rest: 0 1px 2px rgba(0, 0, 0, 0.40);
  --elevation-raised: 0 4px 14px rgba(0, 0, 0, 0.45);
  --elevation-float: 0 12px 32px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --page: #160F33;
    --surface: #241A4D;
    --surface-muted: #30255F;
    --text: #FBF7FF;
    --text-secondary: #CFC5F2;
    --accent: #A58CFF;
    --accent-strong: #C2B2FF;
    --accent-soft: #3B2E7A;
    --on-accent: #160F33;
    --secondary: #FFC93C;
    --on-secondary: #160F33;
    --danger: #FF7C8E;
    --success: #4FE0A0;
    --warning: #FFB65C;
    --hairline: #43387A;
    --tab-icon: #A79DD6;
    --chrome: #1D1541;
    --chrome-veil: rgba(29, 21, 65, 0.80);
    --tab-bar-fill: #1D1541;
    --shadow: rgba(0, 0, 0, 0.45);
    --hero-deep: #3A2A92;
    --hero-mid: #E04B9A;
    --hero-mist: #FFC93C;
    --on-hero: #FFFFFF;
    --focus: #FFD24D;
    --crayon-red: #FF7378;
    --crayon-orange: #FFA048;
    --crayon-yellow: #FFD45A;
    --crayon-green: #45DD97;
    --crayon-blue: #5CB3FF;
    --crayon-pink: #FF8AC6;
    --crayon-teal: #2EE0CF;
    --crayon-purple: #A98BFF;
    --on-crayon: #160F33;
    --elevation-rest: 0 1px 2px rgba(0, 0, 0, 0.40);
    --elevation-raised: 0 4px 14px rgba(0, 0, 0, 0.45);
    --elevation-float: 0 12px 32px rgba(0, 0, 0, 0.55);
  }
}