/* Generated by scripts/build.py from tokens.json — do not edit by hand. */
/* Site copy: fonts are loaded by <link> in the page head instead of @import. */

:root {
  --sx-primary: #5A67A8;
  --sx-primary-dark: #46528F;
  --sx-primary-light: #AEB7E6;
  --sx-tint: #E6E8F4;
  --sx-tint2: #C9CDE8;
  --sx-accent: #C98F58;
  --sx-accent-tint: #F6EADD;
  --sx-accent-text: #8A5A2B;
  --sx-ink: #262C42;
  --sx-ink-light: #323A55;
  --sx-on-ink: #EEF0F6;
  --sx-nav-text: #AEB4C9;
  --sx-nav-active: #EEF0F7;
  --sx-nav-active-bg: rgba(174,183,230,0.14);
  --sx-divider: rgba(255,255,255,0.08);
  --sx-bg: #F2F3F6;
  --sx-surface: #FAFAFC;
  --sx-surface-raised: #FDFDFE;
  --sx-border: #DEE0E8;
  --sx-text-primary: #30343F;
  --sx-text-secondary: #62677A;
  --sx-text-muted: #9095A5;
  --sx-on-primary: #FDFDFE;
  --sx-success: #3D7057;
  --sx-success-tint: #E3F0E9;
  --sx-warning: #8C6A26;
  --sx-warning-tint: #F8F1E3;
  --sx-danger: #AD5A52;
  --sx-danger-tint: #F6E6E3;
  --sx-font-script: 'Dancing Script', cursive;
  --sx-font-ui: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sx-font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --sx-radius-control: 8px;
  --sx-radius-card: 12px;
  --sx-radius-modal: 14px;
  --sx-radius-pill: 999px;
  --sx-shadow-card: 0 1px 2px rgba(38,44,66,0.05);
  --sx-shadow-modal: 0 12px 32px rgba(38,44,66,0.18);
}

/* Dark mode: follows the OS unless the app sets data-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sx-bg: #1C2030;
    --sx-surface: #232838;
    --sx-surface-raised: #2A3043;
    --sx-border: #394058;
    --sx-text-primary: #DADDE6;
    --sx-text-secondary: #A5AABB;
    --sx-text-muted: #80869A;
    --sx-primary: #8C97D4;
    --sx-primary-dark: #AEB7E6;
    --sx-on-primary: #1C2030;
    --sx-tint: #343B58;
    --sx-success: #7FB89C;
    --sx-warning: #D2A95B;
    --sx-danger: #DB8F86;
    --sx-accent: #D9A574;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --sx-bg: #1C2030;
  --sx-surface: #232838;
  --sx-surface-raised: #2A3043;
  --sx-border: #394058;
  --sx-text-primary: #DADDE6;
  --sx-text-secondary: #A5AABB;
  --sx-text-muted: #80869A;
  --sx-primary: #8C97D4;
  --sx-primary-dark: #AEB7E6;
  --sx-on-primary: #1C2030;
  --sx-tint: #343B58;
  --sx-success: #7FB89C;
  --sx-warning: #D2A95B;
  --sx-danger: #DB8F86;
  --sx-accent: #D9A574;
}