/**
 * Design tokens — drupalistas design system.
 * Mirrors tokens.json of the design system; change values there first.
 * Light is the default; dark applies with prefers-color-scheme (unless the
 * site pins light) or when html[data-theme="dark"] is set.
 */

:root {
  color-scheme: light;
  --brand-navy: #03376F;
  --brand-steel: #074D92;
  --brand-blue: #0A7AD5;
  --brand-cyan: #048BD8;
  --brand-ice: #DCEAFD;
  --brand-slate: #55708C;
  --bg: #F4F7FB;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #EBF0F6;
  --border: #D5DEE8;
  --border-strong: #74879E;
  --text: #0E1B2C;
  --text-muted: #4A5D74;
  --text-subtle: #5F7389;
  --primary: #0A6FC4;
  --primary-hover: #075AA1;
  --on-primary: #FFFFFF;
  --primary-soft: #E3F0FC;
  --on-primary-soft: #064A8A;
  --accent: #0679BD;
  --chrome: #03376F;
  --on-chrome: #E4ECF5;
  --on-chrome-muted: #A9C1DB;
  --success: #047857;
  --success-soft: #DCF5EA;
  --warning: #A15C07;
  --warning-soft: #FDF0D5;
  --danger: #C0262D;
  --danger-soft: #FCE4E4;
  --focus: #0A7AD5;
  --code-bg: #0E1B2C;
  --code-text: #E4ECF5;
  --code-muted: #8FA3BA;
  --shadow-sm: 0 1px 2px rgba(3, 24, 48, 0.06);
  --shadow-md: 0 1px 2px rgba(3, 24, 48, 0.05), 0 4px 12px -2px rgba(3, 24, 48, 0.08);
  --shadow-lg: 0 12px 32px -8px rgba(3, 24, 48, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #09111C;
    --surface: #101A27;
    --surface-raised: #152131;
    --surface-sunken: #060C15;
    --border: #223247;
    --border-strong: #5A6E88;
    --text: #E4ECF5;
    --text-muted: #A3B3C6;
    --text-subtle: #8396AD;
    --primary: #4DA3EE;
    --primary-hover: #7AB9F2;
    --on-primary: #04172D;
    --primary-soft: #0F2C4B;
    --on-primary-soft: #A9D2F7;
    --accent: #3BB6F0;
    --chrome: #0C1828;
    --on-chrome-muted: #8396AD;
    --success: #34D399;
    --success-soft: #0B2E24;
    --warning: #FBBF24;
    --warning-soft: #33250A;
    --danger: #F87171;
    --danger-soft: #3A1517;
    --focus: #6CB6F2;
    --code-bg: #060C15;
    --code-muted: #8396AD;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #09111C;
  --surface: #101A27;
  --surface-raised: #152131;
  --surface-sunken: #060C15;
  --border: #223247;
  --border-strong: #5A6E88;
  --text: #E4ECF5;
  --text-muted: #A3B3C6;
  --text-subtle: #8396AD;
  --primary: #4DA3EE;
  --primary-hover: #7AB9F2;
  --on-primary: #04172D;
  --primary-soft: #0F2C4B;
  --on-primary-soft: #A9D2F7;
  --accent: #3BB6F0;
  --chrome: #0C1828;
  --on-chrome-muted: #8396AD;
  --success: #34D399;
  --success-soft: #0B2E24;
  --warning: #FBBF24;
  --warning-soft: #33250A;
  --danger: #F87171;
  --danger-soft: #3A1517;
  --focus: #6CB6F2;
  --code-bg: #060C15;
  --code-muted: #8396AD;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.7);
}

:root {
  --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;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --control-sm: 28px;
  --control-md: 36px;
  --control-lg: 44px;
  --measure: 68ch;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}