/*
 * Design tokens - the ONE source of colour, type, spacing, radius and shadow for the front end.
 *
 * Why one file: the ECharts theme (js/charts/theme.js) is derived at runtime from these custom
 * properties, so a chart can never drift from the page it sits on, and light/dark stay in step.
 *
 * Theme resolution (three states):
 *   - no data-theme attribute  -> follows the OS (prefers-color-scheme)
 *   - data-theme="light"       -> forced light (beats an OS dark setting)
 *   - data-theme="dark"        -> forced dark
 * The attribute is set before first paint by js/theme-init.js from localStorage.
 *
 * Every token is first declared on bare :root (light values); the two dark blocks only redefine.
 * The categorical chart palette is the validated eight-slot order (CVD-checked on both surfaces:
 * worst adjacent CVD dE 9.1 light / 8.4 dark). Three light slots sit under 3:1 on white, so every
 * chart ships a table view (relief rule).
 */

/* Layout concept: calm executive workspace - sticky header over a 1200-1440px content column,
   summary tiles first, then charts in a 12-column grid, detail tables last. */
:root {
  color-scheme: light;

  /* Neutrals: cool slate with a slight teal bias toward the accent. */
  --bg: #f3f6f6;
  --surface: #ffffff;
  --surface-2: #f8fafa;
  --surface-sunken: #ebf0f0;
  --surface-hover: #eef3f3;
  --overlay: rgba(9, 22, 26, 0.42);
  --border: #dbe3e4;
  --border-strong: #c3cfd1;
  --ink: #0d1a1d;
  --ink-2: #3a4b50;
  --ink-3: #56676c;
  --ink-inverse: #ffffff;

  /* Brand accent: deep lagoon teal, used for interaction only (never for data). */
  --accent: #0c6a6d;
  --accent-hover: #09575a;
  --accent-soft: #e0efef;
  --accent-ink: #ffffff;
  --focus: #1b6fd1;
  --brand-gradient: linear-gradient(90deg, #0c6a6d 0%, #2a78d6 55%, #c7a25a 100%);
  /* Sign-in illustration (a light watercolour): untouched in light, dimmed in dark. */
  --hero-filter: none;

  /* Semantic severity: fg is text-safe (AA) on bg; mark is for dots and bars. */
  --sev-error-fg: #a61f1f;
  --sev-error-bg: #fcebea;
  --sev-error-border: #f1c4c2;
  --sev-error-mark: #d03b3b;
  --sev-warning-fg: #7f5200;
  --sev-warning-bg: #fdf2d9;
  --sev-warning-border: #f0d9a2;
  --sev-warning-mark: #fab219;
  --sev-info-fg: #1b5aa6;
  --sev-info-bg: #e6effa;
  --sev-info-border: #bfd4f0;
  --sev-info-mark: #2a78d6;
  --sev-ok-fg: #1a651a;
  --sev-ok-bg: #e5f3e5;
  --sev-ok-border: #bcdcbc;
  --sev-ok-mark: #0ca30c;

  /* Data Trust bands: green >= 80, amber 60-79, red < 60. */
  --trust-green-fg: var(--sev-ok-fg);
  --trust-green-bg: var(--sev-ok-bg);
  --trust-green-mark: var(--sev-ok-mark);
  --trust-amber-fg: var(--sev-warning-fg);
  --trust-amber-bg: var(--sev-warning-bg);
  --trust-amber-mark: var(--sev-warning-mark);
  --trust-red-fg: var(--sev-error-fg);
  --trust-red-bg: var(--sev-error-bg);
  --trust-red-mark: var(--sev-error-mark);

  /* Delta colours (direction-aware: good/bad depends on the KPI direction, not the sign). */
  --delta-good: #1a651a;
  --delta-bad: #a61f1f;
  --delta-neutral: var(--ink-3);

  /* Charts: categorical (fixed order, never cycled), chrome, de-emphasis, sequential ramp. */
  --viz-1: #2a78d6;
  --viz-2: #eb6834;
  --viz-3: #1baf7a;
  --viz-4: #eda100;
  --viz-5: #e87ba4;
  --viz-6: #008300;
  --viz-7: #4a3aa7;
  --viz-8: #e34948;
  --viz-surface: var(--surface);
  --viz-grid: #e6ecec;
  --viz-axis: #c3cfd1;
  --viz-label: #56676c;
  --viz-muted: #b4c0c2;
  --viz-target: #3a4b50;
  --viz-area-opacity: 0.1;
  --seq-1: #cde2fb;
  --seq-2: #9ec5f4;
  --seq-3: #6da7ec;
  --seq-4: #3987e5;
  --seq-5: #256abf;
  --seq-6: #184f95;
  --seq-7: #0d366b;
  --seq-empty: #f0f3f3;

  /* Typography: system UI faces only (CSP allows no external font host). */
  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial,
    sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: "Cascadia Mono", "SFMono-Regular", ui-monospace, Consolas, "Liberation Mono", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --tracking-label: 0.06em;

  /* Spacing (4px base). */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --gutter: clamp(1rem, 2.5vw, 2rem);
  --content-max: 1440px;
  --header-h: 56px;

  /* Radii and shadows. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(13, 26, 29, 0.06);
  --shadow-md: 0 2px 6px rgba(13, 26, 29, 0.06), 0 8px 24px rgba(13, 26, 29, 0.06);
  --shadow-lg: 0 12px 40px rgba(13, 26, 29, 0.16);

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1113;
    --surface: #121a1d;
    --surface-2: #162024;
    --surface-sunken: #0e1618;
    --surface-hover: #1a262a;
    --overlay: rgba(0, 0, 0, 0.6);
    --border: #243236;
    --border-strong: #34454a;
    --ink: #e6eef0;
    --ink-2: #b6c4c8;
    --ink-3: #8d9fa4;
    --ink-inverse: #0b1113;
    --accent: #45b5b0;
    --accent-hover: #62c6c1;
    --accent-soft: #14302f;
    --accent-ink: #04201f;
    --focus: #6aa8f0;
    --brand-gradient: linear-gradient(90deg, #2f9e99 0%, #3987e5 55%, #c9a866 100%);
    --hero-filter: brightness(0.5) saturate(0.8);
    --sev-error-fg: #ff9a92;
    --sev-error-bg: #361717;
    --sev-error-border: #5e2626;
    --sev-error-mark: #e05252;
    --sev-warning-fg: #f3c766;
    --sev-warning-bg: #33280f;
    --sev-warning-border: #5a4718;
    --sev-warning-mark: #fab219;
    --sev-info-fg: #92bff5;
    --sev-info-bg: #13253a;
    --sev-info-border: #24436a;
    --sev-info-mark: #3987e5;
    --sev-ok-fg: #7fd67f;
    --sev-ok-bg: #122c17;
    --sev-ok-border: #21502a;
    --sev-ok-mark: #0ca30c;
    --delta-good: #7fd67f;
    --delta-bad: #ff9a92;
    --viz-1: #3987e5;
    --viz-2: #d95926;
    --viz-3: #199e70;
    --viz-4: #c98500;
    --viz-5: #d55181;
    --viz-6: #008300;
    --viz-7: #9085e9;
    --viz-8: #e66767;
    --viz-grid: #1f2b2f;
    --viz-axis: #34454a;
    --viz-label: #8d9fa4;
    --viz-muted: #3e4d52;
    --viz-target: #b6c4c8;
    --viz-area-opacity: 0.14;
    --seq-1: #16283a;
    --seq-2: #184f95;
    --seq-3: #1c5cab;
    --seq-4: #2a78d6;
    --seq-5: #5598e7;
    --seq-6: #86b6ef;
    --seq-7: #cde2fb;
    --seq-empty: #172125;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1113;
  --surface: #121a1d;
  --surface-2: #162024;
  --surface-sunken: #0e1618;
  --surface-hover: #1a262a;
  --overlay: rgba(0, 0, 0, 0.6);
  --border: #243236;
  --border-strong: #34454a;
  --ink: #e6eef0;
  --ink-2: #b6c4c8;
  --ink-3: #8d9fa4;
  --ink-inverse: #0b1113;
  --accent: #45b5b0;
  --accent-hover: #62c6c1;
  --accent-soft: #14302f;
  --accent-ink: #04201f;
  --focus: #6aa8f0;
  --brand-gradient: linear-gradient(90deg, #2f9e99 0%, #3987e5 55%, #c9a866 100%);
  --hero-filter: brightness(0.5) saturate(0.8);
  --sev-error-fg: #ff9a92;
  --sev-error-bg: #361717;
  --sev-error-border: #5e2626;
  --sev-error-mark: #e05252;
  --sev-warning-fg: #f3c766;
  --sev-warning-bg: #33280f;
  --sev-warning-border: #5a4718;
  --sev-warning-mark: #fab219;
  --sev-info-fg: #92bff5;
  --sev-info-bg: #13253a;
  --sev-info-border: #24436a;
  --sev-info-mark: #3987e5;
  --sev-ok-fg: #7fd67f;
  --sev-ok-bg: #122c17;
  --sev-ok-border: #21502a;
  --sev-ok-mark: #0ca30c;
  --delta-good: #7fd67f;
  --delta-bad: #ff9a92;
  --viz-1: #3987e5;
  --viz-2: #d95926;
  --viz-3: #199e70;
  --viz-4: #c98500;
  --viz-5: #d55181;
  --viz-6: #008300;
  --viz-7: #9085e9;
  --viz-8: #e66767;
  --viz-grid: #1f2b2f;
  --viz-axis: #34454a;
  --viz-label: #8d9fa4;
  --viz-muted: #3e4d52;
  --viz-target: #b6c4c8;
  --viz-area-opacity: 0.14;
  --seq-1: #16283a;
  --seq-2: #184f95;
  --seq-3: #1c5cab;
  --seq-4: #2a78d6;
  --seq-5: #5598e7;
  --seq-6: #86b6ef;
  --seq-7: #cde2fb;
  --seq-empty: #172125;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
}