/* Generated from @suzu/tokens by scripts/build.ts — do not edit. */
:root {
  --canvas: #F8F7F3;
  --surface: #FFFFFF;
  --surface-raised: #F1ECDC;
  --surface-raised-deep: #E8DFC5;
  --surface-sunken: #EFEAE0;
  --surface-brand: #E7F1FA;
  --surface-ai: #F1ECF8;
  --surface-reward: #F1ECDC;
  --text-primary: #282828;
  --text-secondary: #6B6A62;
  --text-tertiary: #9B998E;
  --text-on-brand: #FFFFFF;
  --text-on-accent: #282828;
  --text-link: #4E86BC;
  --border: #E3DCC8;
  --border-strong: #D2C6A8;
  --border-interactive: #6FA8DC;
  --brand: #6FA8DC;
  --brand-hover: #4E86BC;
  --brand-active: #3E6FA0;
  --tone-reward: #E5674F;
  --tone-reward-tint: #FBEAE5;
  --tone-ai: #B9A8D6;
  --tone-highlight: #F2C94C;
  --tone-highlight-tint: #FCF3D6;
  --state-mastered: #6E8770;
  --state-correct: #6FA875;
  --state-correct-tint: #E7F2E8;
  --state-warning: #B98A1E;
  --state-incorrect: #C94E38;
  --state-incorrect-tint: #FBEAE5;
  --focus-ring: #6FA8DC;
  --ink-a-04: rgba(40, 40, 40, 0.04);
  --ink-a-06: rgba(40, 40, 40, 0.06);
  --ink-a-08: rgba(40, 40, 40, 0.08);
  --ink-a-12: rgba(40, 40, 40, 0.12);
  --ink-a-20: rgba(40, 40, 40, 0.20);
  --lavender-a-18: rgba(185, 168, 214, 0.18);
  --lavender-a-30: rgba(185, 168, 214, 0.3);
  --lavender-a-50: rgba(185, 168, 214, 0.5);
  --grid-dot: rgba(40, 40, 40, 0.09);
  --washi-blue: rgba(111, 168, 220, 0.55);
  --washi-mustard: rgba(242, 201, 76, 0.5);
  --washi-tomato: rgba(229, 103, 79, 0.45);
  --skill-reading-accent: #6FA8DC;
  --skill-reading-tint: #E7F1FA;
  --skill-reading-strong: #4E86BC;
  --skill-listening-accent: #A7B8A6;
  --skill-listening-tint: #EDF2EC;
  --skill-listening-strong: #6E8770;
  --skill-speaking-accent: #E5674F;
  --skill-speaking-tint: #FBEAE5;
  --skill-speaking-strong: #C94E38;
  --skill-writing-accent: #F2C94C;
  --skill-writing-tint: #FCF3D6;
  --skill-writing-strong: #B98A1E;
  --skill-vocabulary-accent: #B9A8D6;
  --skill-vocabulary-tint: #F1ECF8;
  --skill-vocabulary-strong: #8B72B3;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 999px;
  --radius-sticky: 3px;
  --space-0: 0px;
  --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: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --shadow-xs: 0px 1px 2px rgba(40, 40, 40, 0.05);
  --shadow-sm: 0px 3px 8px rgba(40, 40, 40, 0.06);
  --shadow-md: 0px 10px 24px rgba(40, 40, 40, 0.08);
  --shadow-lg: 0px 24px 56px rgba(40, 40, 40, 0.12);
  --shadow-sticky: 0px 3px 6px rgba(40, 40, 40, 0.12);
  --shadow-tape: 0px 1px 3px rgba(40, 40, 40, 0.18);
  --duration-fast: 120ms;
  --duration-short: 160ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-slower: 520ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}