/* Generated by scripts/design-tokens.py from docs/DESIGN.md. Don't edit: change DESIGN.md and run
   `make design-tokens`. Light by default, dark with the system (prefers-color-scheme) or data-theme="dark";
   data-theme="light" forces light. */
:root {
  color-scheme: light;
  --bg: #F3F3F5;
  --surface: #FFFFFF;
  --sunken: #EAEAED;
  --border: #DCDCE1;
  --text: #1F1F23;
  --text-2: #5E5E66;
  --text-3: #6F6F77;
  --accent: #FFD84D;
  --accent-press: #F7C83A;
  --on-accent: #2A2320;
  --accent-subtle: #FFF5CC;
  --link: #1F1F23;
  --focus: #2A2320;
  --success: #1A7340;
  --success-bg: #E6F4EA;
  --warning: #9A4A0B;
  --warning-bg: #FDF1E4;
  --danger: #B42318;
  --danger-bg: #FDEDEC;
  --danger-fill: #C62828;
  --on-danger: #FFFFFF;
  --shadow-pop: 0 12px 32px rgba(20, 20, 24, 0.16), 0 0 0 1px rgba(20, 20, 24, 0.06);
  --font-micro: 11px;
  --font-caption: 12px;
  --font-footnote: 13px;
  --font-body: 16px;
  --font-callout: 16px;
  --font-headline: 18px;
  --font-title3: 22px;
  --font-title: 28px;
  --font-display: 40px;
  --radius-sm: 6px;
  --radius-control: 10px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --radius-pill: 999px;
  --space-half: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1B1B1F;
    --surface: #26262B;
    --sunken: #151518;
    --border: #37373E;
    --text: #F2F2F4;
    --text-2: #A8A8B0;
    --text-3: #8E8E96;
    --accent: #F7C83A;
    --accent-press: #E9B92C;
    --on-accent: #2A2320;
    --accent-subtle: #3A3322;
    --link: #FFD84D;
    --focus: #FFD84D;
    --success: #6FD39A;
    --success-bg: #17301F;
    --warning: #F4B070;
    --warning-bg: #3A2818;
    --danger: #FF8A80;
    --danger-bg: #3D1E1D;
    --danger-fill: #E5484D;
    --on-danger: #FFFFFF;
    --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1B1B1F;
  --surface: #26262B;
  --sunken: #151518;
  --border: #37373E;
  --text: #F2F2F4;
  --text-2: #A8A8B0;
  --text-3: #8E8E96;
  --accent: #F7C83A;
  --accent-press: #E9B92C;
  --on-accent: #2A2320;
  --accent-subtle: #3A3322;
  --link: #FFD84D;
  --focus: #FFD84D;
  --success: #6FD39A;
  --success-bg: #17301F;
  --warning: #F4B070;
  --warning-bg: #3A2818;
  --danger: #FF8A80;
  --danger-bg: #3D1E1D;
  --danger-fill: #E5484D;
  --on-danger: #FFFFFF;
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
}