/* Kibbo Design System — generated from tokens.json (R1 Locked). Light ships; dark remains experimental. */
:root {
  --persimmon: #FF7A59;
  --soft-black: #24221F;
  --warm-cream: #FFF8ED;
  --eye-cream: #FFFBF2;
  --kibbo-yellow: #FFD84D;
  --bg: #FFF8ED;
  --surface: #FFFCF6;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F3EBDE;
  --ink: #24221F;
  --ink-2: #5E574D;
  --ink-3: #716A5F;
  --on-primary: #24221F;
  --on-tile: #24221F;
  --border: #E8DFD1;
  --border-control: #8F8578;
  --primary: var(--persimmon);
  --primary-hover: #F96D4B;
  --primary-pressed: #E9603F;
  --primary-tint: #FFE7DE;
  --success: #3DBE84;
  --success-ink: #1E7A50;
  --success-tint: #DDF5E8;
  --warning: #F5A524;
  --warning-ink: #8A5A00;
  --warning-tint: #FFF0D1;
  --failure: #D33A3F;
  --failure-ink: #B42E33;
  --failure-tint: #FDE3E1;
  --info: #3E7BD6;
  --info-ink: #2C62B5;
  --info-tint: #E1ECFB;
  --disabled-bg: #EFE7DA;
  --disabled-ink: #A39A8C;
  --focus: #24221F;
  --reward: var(--kibbo-yellow);
  --reward-tint: #FFF4C7;
  --hole: #24221F;
  --stage-quiet: var(--surface-sunken);
  --stage-trigger: var(--primary);
  --cat-logic: #A9D4F5;
  --cat-words: #CDBDF7;
  --cat-memory: #A8E3C8;
  --cat-reaction: #F7C2D6;
  --cat-visual: #E9DB9F;
  --cat-personality: #FFCDB9;
  --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;
  --space-20: 80px;
  --space-24: 96px;
  --margin-mobile: 20px;
  --margin-tablet: 32px;
  --margin-desktop: 48px;
  --content-max: 1200px;
  --reading-max: 720px;
  --game-max: 560px;
  --header-h: 72px;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --radius-round: 50%;
  --depth-flat: none;
  --depth-soft: 0 1px 0 rgba(36,34,31,0.04), 0 6px 18px rgba(36,34,31,0.06);
  --depth-hover: 0 1px 0 rgba(36,34,31,0.04), 0 12px 26px rgba(36,34,31,0.10);
  --depth-raised: inset 0 -4px 0 rgba(36,34,31,0.14), 0 6px 14px rgba(36,34,31,0.10);
  --depth-pressed: inset 0 3px 6px rgba(36,34,31,0.20);
  --depth-floating: 0 18px 44px rgba(36,34,31,0.18);
  --depth-focus: 0 0 0 3px #FFF8ED, 0 0 0 6px #24221F;
  --depth-tile: inset 0 -8px 0 rgba(36,34,31,0.07);
  --dur-instant: 80ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-reveal: 900ms;
  --ease-enter: cubic-bezier(0.3, 0.7, 0.4, 1);
  --ease-settle: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
[data-theme="dark"] {
  --bg: #1B1917;
  --surface: #24221F;
  --surface-raised: #2F2C28;
  --surface-sunken: #141210;
  --ink: #FFF8ED;
  --ink-2: #D3C9BA;
  --ink-3: #A89E8F;
  --border: #3A3631;
  --border-control: #7D7468;
  --primary: var(--persimmon);
  --primary-tint: #47271E;
  --success-ink: #7FDDB0;
  --success-tint: #173A2A;
  --warning-ink: #FFC861;
  --warning-tint: #3D2C0A;
  --failure-ink: #FF8A8D;
  --failure-tint: #40191A;
  --info-ink: #8DB8F5;
  --info-tint: #18263D;
  --disabled-bg: #2F2C28;
  --disabled-ink: #6E665B;
  --focus: #FFF8ED;
  --reward: var(--kibbo-yellow);
  --reward-tint: #3A3112;
  --hole: #0E0D0C;
  --stage-quiet: var(--surface-sunken);
  --stage-trigger: var(--primary);
  --depth-soft: 0 1px 0 rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.30);
  --depth-hover: 0 2px 0 rgba(0,0,0,0.20), 0 14px 30px rgba(0,0,0,0.38);
  --depth-raised: inset 0 -4px 0 rgba(0,0,0,0.34), 0 7px 18px rgba(0,0,0,0.30);
  --depth-pressed: inset 0 3px 7px rgba(0,0,0,0.44);
  --depth-floating: 0 20px 52px rgba(0,0,0,0.52);
  --depth-focus: 0 0 0 3px #1B1917, 0 0 0 6px #FFF8ED;
  --depth-tile: inset 0 -8px 0 rgba(0,0,0,0.16);
  color-scheme: dark;
}

/* Text styles (desktop) */
.display { font: 800 72px/72px var(--font-display); letter-spacing: -0.02em; }
.h1 { font: 800 48px/52px var(--font-display); letter-spacing: -0.02em; }
.h2 { font: 700 32px/38px var(--font-display); letter-spacing: -0.01em; }
.game-prompt { font: 700 28px/34px var(--font-display); }
.result-title { font: 800 56px/54px var(--font-display); letter-spacing: -0.02em; }
.score { font: 800 64px/64px var(--font-display); }
.stat { font: 800 36px/40px var(--font-display); }
.h3 { font: 700 22px/28px var(--font-sans); }
.body-lg { font: 400 18px/28px var(--font-sans); }
.body { font: 400 16px/24px var(--font-sans); }
.caption { font: 500 13px/18px var(--font-sans); }
.label { font: 700 12px/16px var(--font-sans); letter-spacing: 0.06em; }
.button { font: 700 16px/20px var(--font-sans); }
.timer { font: 500 14px/18px var(--font-mono); }

/* Text styles (mobile < 640px) */
.display-m { font: 800 44px/46px var(--font-display); letter-spacing: -0.02em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.h1-m { font: 800 34px/38px var(--font-display); letter-spacing: -0.02em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.h2-m { font: 700 26px/30px var(--font-display); letter-spacing: -0.01em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.h3-m { font: 700 19px/24px var(--font-sans); }
.game-prompt-m { font: 700 22px/28px var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; }
.result-title-m { font: 800 38px/38px var(--font-display); letter-spacing: -0.02em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.score-m { font: 800 48px/48px var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; font-variant-numeric: tabular-nums; }
.stat-m { font: 800 30px/34px var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; font-variant-numeric: tabular-nums; }
.body-lg-m { font: 400 17px/26px var(--font-sans); }