/* WSP Design System — Design Tokens
   Single source of truth. Imported by every page. */

:root {
  /* === BRAND PALETTE (raw) ============================================ */
  --spw-ink-950: #060D18;
  --spw-ink-900: #0C1726;
  --spw-ink-850: #122238;
  --spw-ink-800: #17304B;
  --spw-ink-700: #1E3F5F;

  --spw-blue-900: #0B2A4A;  /* primary deep */
  --spw-blue-800: #17426D;
  --spw-blue-700: #255E94;
  --spw-blue-600: #3E6FA3;  /* steel */
  --spw-blue-500: #5B8DBF;
  --spw-blue-400: #6BAEDB;  /* sky */
  --spw-blue-300: #9AC9E6;
  --spw-blue-200: #C5DFEE;
  --spw-blue-100: #E4EFF7;

  --spw-cream-500: #E8DEC8;
  --spw-cream-400: #EFE6D2;
  --spw-cream-300: #F2EBDC;  /* cream base */
  --spw-cream-200: #F7F2E6;
  --spw-cream-100: #FBF8F0;

  --spw-orange-700: #B94E1C;
  --spw-orange-600: #D25A22;
  --spw-orange-500: #E06A2C;  /* orange signal */
  --spw-orange-400: #EC8650;
  --spw-orange-300: #F4A57A;
  --spw-orange-200: #FAC9AB;
  --spw-orange-100: #FDE6D6;

  /* === SEMANTIC (dark default) ======================================== */
  --bg-canvas: var(--spw-ink-950);
  --bg-surface: var(--spw-ink-900);
  --bg-surface-raised: var(--spw-ink-850);
  --bg-surface-hover: var(--spw-ink-800);
  --bg-sunken: var(--spw-ink-950);
  --bg-overlay: rgba(6, 13, 24, 0.72);

  --border-subtle: rgba(197, 223, 238, 0.08);
  --border-default: rgba(197, 223, 238, 0.14);
  --border-strong: rgba(197, 223, 238, 0.24);
  --border-focus: var(--spw-blue-400);

  --text-primary: #ECF2F8;
  --text-secondary: #A9B9CC;
  --text-tertiary: #6F8196;
  --text-disabled: #485B70;
  --text-on-cream: var(--spw-ink-900);
  --text-on-orange: #FFFFFF;
  --text-on-blue: #FFFFFF;

  --accent-primary: var(--spw-blue-400);
  --accent-primary-hover: var(--spw-blue-300);
  --accent-primary-active: var(--spw-blue-500);
  --accent-secondary: var(--spw-cream-300);
  --accent-signal: var(--spw-orange-500);
  --accent-signal-hover: var(--spw-orange-400);

  /* status */
  --status-success: #3BB07A;
  --status-success-bg: rgba(59, 176, 122, 0.14);
  --status-warning: #E8B547;
  --status-warning-bg: rgba(232, 181, 71, 0.14);
  --status-danger: #E15454;
  --status-danger-bg: rgba(225, 84, 84, 0.14);
  --status-info: var(--spw-blue-400);
  --status-info-bg: rgba(107, 174, 219, 0.14);

  /* score gradient (0-100) */
  --score-poor: #E15454;
  --score-mid: #E8B547;
  --score-good: #3BB07A;
  --score-great: #17A675;

  /* === DATA VIZ ======================================================= */
  --chart-1: #3E6FA3;  /* steel blue */
  --chart-2: #E06A2C;  /* orange */
  --chart-3: #6BAEDB;  /* sky */
  --chart-4: #E8DEC8;  /* cream */
  --chart-5: #17426D;  /* deep blue */
  --chart-6: #B94E1C;  /* deep orange */
  --chart-7: #9AC9E6;  /* light sky */
  --chart-8: #5B7A95;  /* slate blue */

  /* sequential blue (light→dark), usable for heatmaps/density */
  --seq-blue-1: #E4EFF7;
  --seq-blue-2: #C5DFEE;
  --seq-blue-3: #9AC9E6;
  --seq-blue-4: #6BAEDB;
  --seq-blue-5: #3E6FA3;
  --seq-blue-6: #255E94;
  --seq-blue-7: #0B2A4A;

  /* diverging blue↔orange */
  --div-n3: #0B2A4A;
  --div-n2: #3E6FA3;
  --div-n1: #9AC9E6;
  --div-0:  #F2EBDC;
  --div-p1: #F4A57A;
  --div-p2: #E06A2C;
  --div-p3: #B94E1C;

  /* === TYPOGRAPHY ===================================================== */
  --font-sans: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-36: 36px;
  --fs-48: 48px;
  --fs-64: 64px;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* === SPACING (4px base) ============================================= */
  --sp-0: 0;
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 20px;
  --sp-7: 24px;
  --sp-8: 32px;
  --sp-9: 40px;
  --sp-10: 48px;
  --sp-11: 64px;
  --sp-12: 80px;
  --sp-13: 96px;
  --sp-14: 128px;

  /* === RADIUS ========================================================= */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* === ELEVATION ====================================================== */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-4: 0 16px 48px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 3px rgba(107, 174, 219, 0.35);
  --shadow-focus-signal: 0 0 0 3px rgba(224, 106, 44, 0.35);

  /* === MOTION ========================================================= */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --dur-slow: 320ms;

  /* === LAYOUT ========================================================= */
  --container-max: 1360px;
  --container-gutter: 32px;
  --sidebar-w: 280px;
  --topbar-h: 60px;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-modal: 1300;
  --z-toast: 1400;
}

/* === LIGHT THEME ====================================================== */
[data-theme='light'] {
  --bg-canvas: var(--spw-cream-200);
  --bg-surface: #FFFFFF;
  --bg-surface-raised: #FFFFFF;
  --bg-surface-hover: var(--spw-cream-100);
  --bg-sunken: var(--spw-cream-300);
  --bg-overlay: rgba(11, 42, 74, 0.55);

  --border-subtle: rgba(11, 42, 74, 0.08);
  --border-default: rgba(11, 42, 74, 0.14);
  --border-strong: rgba(11, 42, 74, 0.22);
  --border-focus: var(--spw-blue-700);

  --text-primary: var(--spw-ink-900);
  --text-secondary: #3E5877;
  --text-tertiary: #6A7E96;
  --text-disabled: #A9B6C7;
  --text-on-cream: var(--spw-ink-900);
  --text-on-orange: #FFFFFF;
  --text-on-blue: #FFFFFF;

  --accent-primary: var(--spw-blue-700);
  --accent-primary-hover: var(--spw-blue-800);
  --accent-primary-active: var(--spw-blue-900);

  --status-success: #1F8A5A;
  --status-success-bg: rgba(31, 138, 90, 0.12);
  --status-warning: #B88A1F;
  --status-warning-bg: rgba(184, 138, 31, 0.14);
  --status-danger: #C13B3B;
  --status-danger-bg: rgba(193, 59, 59, 0.1);
  --status-info: var(--spw-blue-700);
  --status-info-bg: rgba(37, 94, 148, 0.1);

  --shadow-1: 0 1px 2px rgba(11, 42, 74, 0.08);
  --shadow-2: 0 2px 8px rgba(11, 42, 74, 0.08), 0 1px 2px rgba(11, 42, 74, 0.06);
  --shadow-3: 0 8px 24px rgba(11, 42, 74, 0.12), 0 2px 6px rgba(11, 42, 74, 0.08);
  --shadow-4: 0 16px 48px rgba(11, 42, 74, 0.16), 0 4px 12px rgba(11, 42, 74, 0.1);
}

/* === BASE RESET ======================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  font-size: 16px;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
[data-theme='light'] html,
html[data-theme='light'] { color-scheme: light; }

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  font-feature-settings: 'cv11', 'ss01', 'ss03', 'tnum' 0;
}

a { color: var(--accent-primary); text-decoration: none; }
a:hover { color: var(--accent-primary-hover); }

button { font-family: inherit; }

::selection {
  background: var(--spw-orange-500);
  color: #fff;
}

/* numeric data uses tabular lining */
.tabular,
[data-numeric] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Utility classes used across the docs pages */
.mono { font-family: var(--font-mono); }
.caps { text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--fs-11); font-weight: var(--fw-semibold); color: var(--text-tertiary); }
.muted { color: var(--text-secondary); }
.dim { color: var(--text-tertiary); }