/* ==================================================================================
   Design tokens: the one place the app's colours, type, spacing, radii and motion
   are defined. Everything else refers to these names. See docs/design-system.md.

   <html> carries the user's Display settings, set before the page paints by the
   script at the top of base.html:
     data-theme="light|dark"   the resolved theme ("system" is resolved by the script)
     data-accent="blue|indigo|violet|graphite"   absent means teal
     data-density="comfortable"                  absent means compact
   ================================================================================== */

/* ---- Light theme (default) --------------------------------------------------------- */
:root {
    color-scheme: light;

    --bg: #f2f5f6;                 /* page background */
    --surface: #ffffff;            /* cards, panels, app bar */
    --surface-2: #f6f8f9;          /* table headers, inset areas */
    --surface-3: #eaeff1;          /* chips, neutral badges, pressed */
    --border: #d5dde1;
    --border-strong: #b6c2c8;      /* inputs, dividers that must show */
    --text: #13202a;
    --text-muted: #566771;         /* labels, secondary text (AA on all surfaces) */
    --text-subtle: #7a8a93;        /* placeholders, disabled, hints */
    --input-bg: var(--surface);
    --hover: color-mix(in srgb, var(--text) 5%, transparent);
    --scrim: rgba(16, 32, 42, .45);

    /* Accent choices; data-accent picks one (below). Each passes WCAG AA as text. */
    --accent-teal: #0a7a76;     --accent-teal-hover: #086a66;
    --accent-blue: #2563c9;     --accent-blue-hover: #1d52a8;
    --accent-indigo: #4f54d9;   --accent-indigo-hover: #4045b8;
    --accent-violet: #7a4fcf;   --accent-violet-hover: #653fb0;
    --accent-graphite: #3f4d56; --accent-graphite-hover: #2e3a41;
    --accent-fg: #ffffff;          /* text and icons on an accent fill */
    --accent-subtle: color-mix(in srgb, var(--accent) 11%, var(--surface));
    --focus: var(--accent);

    --success: #1a7950;  --success-subtle: #e1f2e9;
    --warning: #936110;  --warning-subtle: #fbf0db;
    --danger: #ba3c35;   --danger-subtle: #fbe6e4;
    --info: #2c69ad;     --info-subtle: #e2ecf8;
    --on-status: #ffffff;          /* text on a solid status fill */

    --chart-bg: #ffffff; --chart-grid: #e3e9ec; --chart-axis: #566771;
    --chart-zero: #b6c2c8;
    /* Series colours, in hand-out order (the survey well colours, light versions). */
    --data-1: #2da593; --data-2: #d68023; --data-3: #808dec; --data-4: #b9897b; --data-5: #da6ca3;
    --data-6: #e4736f; --data-7: #c07ccb; --data-8: #a69420; --data-9: #73a046; --data-10: #3a9ed0;
    /* Continuous (Viridis) and caliper-versus-gauge (under, gauge, over) scales. */
    --seq-1: #440154; --seq-2: #3b528b; --seq-3: #21918c; --seq-4: #5ec962; --seq-5: #fde725;
    --div-low: #2f6db3; --div-mid: #d9dee1; --div-high: #c7423b;

    --shadow-1: 0 1px 2px rgba(16, 32, 42, .06);
    --shadow-2: 0 8px 24px rgba(16, 32, 42, .14);

    /* ---- Type, spacing, sizes, motion (theme-independent) ---- */
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'Cascadia Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px;
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
    --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-pill: 999px;
    --h-sm: 28px; --h-md: 32px; --h-lg: 36px;     /* control heights */
    --row: 30px;                                 /* table row height */
    --pad: 12px;                                 /* panel and card padding */
    --dur-fast: 120ms; --dur-med: 180ms; --dur-slow: 240ms; --ease: cubic-bezier(.2, 0, 0, 1);
}

:root[data-density="comfortable"] {
    --h-sm: 32px; --h-md: 36px; --h-lg: 40px; --row: 36px; --pad: 16px;
}

/* ---- Dark theme ------------------------------------------------------------------- */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0d1317;
    --surface: #131b20;
    --surface-2: #192329;
    --surface-3: #202c33;
    --border: #28353d;
    --border-strong: #3a4a53;
    --text: #e4ebee;
    --text-muted: #99aab3;
    --text-subtle: #73858e;
    --input-bg: #0f171b;
    --hover: color-mix(in srgb, var(--text) 6%, transparent);
    --scrim: rgba(0, 0, 0, .6);

    --accent-teal: #38c4be;     --accent-teal-hover: #5cd3ce;
    --accent-blue: #5b9cf0;     --accent-blue-hover: #7db1f4;
    --accent-indigo: #8c90f5;   --accent-indigo-hover: #a6a9f8;
    --accent-violet: #b194f2;   --accent-violet-hover: #c4adf5;
    --accent-graphite: #c9d4da; --accent-graphite-hover: #e1e8eb;
    --accent-fg: #06151a;
    --accent-subtle: color-mix(in srgb, var(--accent) 15%, var(--surface));
    --focus: var(--accent-hover);

    --success: #3dbd84;  --success-subtle: rgba(61, 189, 132, .14);
    --warning: #e3a84a;  --warning-subtle: rgba(227, 168, 74, .14);
    --danger: #ee6a62;   --danger-subtle: rgba(238, 106, 98, .14);
    --info: #6aa6ea;     --info-subtle: rgba(106, 166, 234, .14);
    --on-status: #0d1317;

    --chart-bg: #0f171b; --chart-grid: #22303a; --chart-axis: #99aab3;
    --chart-zero: #3a4a53;
    --data-1: #65d5c5; --data-2: #e6a968; --data-3: #9da7f0; --data-4: #dfc9c3; --data-5: #da6ca3;
    --data-6: #e88884; --data-7: #cf9bd7; --data-8: #e3d36c; --data-9: #a6c983; --data-10: #67b4db;
    --div-low: #5a92dc; --div-mid: #3a4851; --div-high: #ee6a62;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-2: 0 10px 28px rgba(0, 0, 0, .45);
}

/* ---- The chosen accent (teal unless data-accent says otherwise), in either theme. ---- */
:root                         { --accent: var(--accent-teal);     --accent-hover: var(--accent-teal-hover); }
:root[data-accent="blue"]     { --accent: var(--accent-blue);     --accent-hover: var(--accent-blue-hover); }
:root[data-accent="indigo"]   { --accent: var(--accent-indigo);   --accent-hover: var(--accent-indigo-hover); }
:root[data-accent="violet"]   { --accent: var(--accent-violet);   --accent-hover: var(--accent-violet-hover); }
:root[data-accent="graphite"] { --accent: var(--accent-graphite); --accent-hover: var(--accent-graphite-hover); }

/* ---- Bootstrap 5.3 reads these; pointing them at our tokens themes its components. -- */
:root {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-body-font-family: var(--font-ui);
    --bs-body-font-size: var(--fs-base);
    --bs-body-line-height: 1.5;
    --bs-emphasis-color: var(--text);
    --bs-heading-color: var(--text);
    --bs-secondary-color: var(--text-muted);
    --bs-secondary-bg: var(--surface-2);
    --bs-tertiary-color: var(--text-subtle);
    --bs-tertiary-bg: var(--surface-3);
    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-border-radius: var(--r-md);
    --bs-border-radius-sm: var(--r-sm);
    --bs-border-radius-lg: var(--r-lg);
    --bs-border-radius-xl: var(--r-xl);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent-hover);
    --bs-focus-ring-color: color-mix(in srgb, var(--focus) 35%, transparent);
    --bs-form-valid-color: var(--success);
    --bs-form-valid-border-color: var(--success);
    --bs-form-invalid-color: var(--danger);
    --bs-form-invalid-border-color: var(--danger);
    --bs-code-color: var(--accent);
}