/*
 * Design tokens: the only place a raw colour or size is written (ADR 0010).
 *
 * Palette tokens (--gray-*, --indigo-*, ...) name raw values and are used only in this file.
 * Components use the semantic tokens below them, named by role, so a theme (PR 18's dark mode)
 * redefines the semantic layer and nothing else.
 *
 * Breakpoints can't be custom properties, so they're written literally in media queries:
 *   max-width: 1100px   wide -> compact (side-by-side panels stack)
 *   max-width: 820px    compact -> narrow (single column); min-width: 821px for wide-only rules
 */

:root {
  /* Palette: neutrals, cool with a hint of the brand indigo. */
  --gray-0: #ffffff;
  --gray-25: #fafafd;
  --gray-50: #f6f7fa;
  --gray-100: #eef0f4;
  --gray-200: #e4e6ee;
  --gray-300: #d3d7e1;
  --gray-400: #a3a8b8;
  --gray-500: #666d80;
  --gray-600: #5e6578;
  --gray-700: #3f4558;
  --gray-800: #262a3b;
  --gray-900: #171827;

  /* Palette: the brand accent. */
  --indigo-50: #f3f1fe;
  --indigo-100: #e6e2fc;
  --indigo-300: #b4aaf2;
  --indigo-500: #6657d9;
  --indigo-600: #5546c4;
  --indigo-700: #4538a6;

  /* Palette: status. */
  --green-50: #eaf7f1;
  --green-500: #10a474;
  --green-700: #14795b;
  --amber-50: #fff5e6;
  --amber-500: #d88713;
  --amber-700: #9b6209;
  --red-50: #fff0f2;
  --red-500: #d63d4a;
  --red-700: #b42335;

  /* Palette: charts only. */
  --blue-50: #edf4ff;
  --blue-500: #4f86eb;

  /* Surfaces. */
  --surface: var(--gray-0);
  --surface-page: var(--gray-50);
  --surface-subtle: var(--gray-25);
  --surface-sunken: var(--gray-100);
  --surface-inverse: var(--gray-900);
  --surface-inverse-hover: var(--gray-800);
  --surface-translucent: rgb(246 247 250 / 0.88);
  --overlay: rgb(23 24 39 / 0.32);

  /* Text. */
  --text: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-faint: var(--gray-500);
  --text-inverse: var(--gray-0);
  --text-accent: var(--indigo-600);
  --text-success: var(--green-700);
  --text-warning: var(--amber-700);
  --text-danger: var(--red-700);

  /* Borders. */
  --border-subtle: var(--gray-100);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-inverse: var(--gray-800);
  --border-accent: var(--indigo-300);

  /* Accent and status fills. */
  --accent: var(--indigo-500);
  --accent-hover: var(--indigo-600);
  --accent-soft: var(--indigo-50);
  --accent-soft-strong: var(--indigo-100);
  --success: var(--green-500);
  --success-soft: var(--green-50);
  --success-border: color-mix(in srgb, var(--green-500) 30%, var(--gray-0));
  --warning: var(--amber-500);
  --warning-soft: var(--amber-50);
  --warning-border: color-mix(in srgb, var(--amber-500) 30%, var(--gray-0));
  --danger: var(--red-500);
  --danger-soft: var(--red-50);
  --danger-border: color-mix(in srgb, var(--red-500) 30%, var(--gray-0));

  /* Chart series. */
  --chart-application: var(--blue-500);
  --chart-application-soft: var(--blue-50);
  --chart-asset: var(--gray-400);
  --chart-finance: var(--green-500);
  --chart-risk: var(--red-500);

  /* Elevation. */
  --shadow-xs: 0 1px 2px rgb(23 24 39 / 0.04);
  --shadow-sm: 0 2px 8px rgb(23 24 39 / 0.05);
  --shadow-md: 0 8px 28px rgb(23 24 39 / 0.07);
  --shadow-lg: 0 24px 72px rgb(23 24 39 / 0.14);
  --shadow-accent: 0 6px 18px rgb(102 87 217 / 0.22);
  --focus-ring: 0 0 0 3px rgb(102 87 217 / 0.25);

  /* Type. 14px body; nothing below 12px. */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-wide: 0.06em;

  /* Space: 4px steps. */
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --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;

  /* Shape. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 999px;

  /* Layering, lowest first. */
  --z-raised: 1;
  --z-header: 10;
  --z-sidebar: 20;
  --z-drawer: 30;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 60;
  --z-skip-link: 70;

  /* Motion. */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease: ease;

  /* Layout. */
  --sidebar-width: 248px;
  --sidebar-width-collapsed: 72px;
  --header-height: 64px;
}

/*
 * Dark theme: the semantic layer again, for dark surfaces. theme.js sets data-theme on <html> from
 * the viewer's choice or the operating system. Every text token keeps WCAG AA contrast (4.5:1) on
 * every surface; tests/visual/test_accessibility.py checks each page in both themes.
 */
:root[data-theme="dark"] {
  color-scheme: dark;

  --surface: #1a1c26;
  --surface-page: #12131a;
  --surface-subtle: #1e202b;
  --surface-sunken: #252836;
  --surface-inverse: #eceef4;
  --surface-inverse-hover: #d6d9e3;
  --surface-translucent: rgb(18 19 26 / 0.88);
  --overlay: rgb(0 0 0 / 0.6);

  --text: #eceef4;
  --text-secondary: #d3d6e0;
  --text-tertiary: #b9bdca;
  --text-muted: #a2a7b6;
  --text-faint: #a2a7b6;
  --text-inverse: #12131a;
  --text-accent: #b3a9ff;
  --text-success: #5fd4a8;
  --text-warning: #f2b862;
  --text-danger: #ff9aa3;

  --border-subtle: #252836;
  --border: #30344a;
  --border-strong: #454a61;
  --border-inverse: #d6d9e3;
  --border-accent: #6f63d9;

  --accent: #8b7ff5;
  --accent-hover: #9d93f7;
  --accent-soft: rgb(139 127 245 / 0.16);
  --accent-soft-strong: rgb(139 127 245 / 0.28);
  --success: #34c38f;
  --success-soft: rgb(52 195 143 / 0.14);
  --success-border: rgb(52 195 143 / 0.4);
  --warning: #e0a042;
  --warning-soft: rgb(224 160 66 / 0.14);
  --warning-border: rgb(224 160 66 / 0.4);
  --danger: #f0616d;
  --danger-soft: rgb(240 97 109 / 0.14);
  --danger-border: rgb(240 97 109 / 0.4);

  --chart-application: #6d9cf5;
  --chart-application-soft: rgb(109 156 245 / 0.16);
  --chart-asset: #7a8195;
  --chart-finance: #34c38f;
  --chart-risk: #f0616d;

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 2px 8px rgb(0 0 0 / 0.35);
  --shadow-md: 0 8px 28px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 24px 72px rgb(0 0 0 / 0.55);
  --shadow-accent: 0 6px 18px rgb(0 0 0 / 0.4);
  --focus-ring: 0 0 0 3px rgb(139 127 245 / 0.45);
}

/* Reduced motion: every transition uses the duration tokens, so zeroing them stops all motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}