/* The design tokens: one definition of each. Every stylesheet reads its
 * colours, weights and sizes from here, with exceptions: styles.css still
 * writes a few colours of its own (some 20 hex values, most in dark-mode
 * rules), which test_stylesheet_tokens holds to no repeated neutral and no
 * redeclared token (AUT-387: this said "the only place", which it was not).
 *
 * They used to be declared in FOUR blocks - two :root blocks in styles.css
 * (the second quietly overriding the first), one in refactored.css, and a
 * dark-mode block in each file. refactored.css loads last, so ITS values were
 * the ones the browser used and the others were dead text that read as if
 * they applied. Since AUT-246 the older names below are aliases of the design
 * system's, so changing a value here changes every page.
 *
 * Loaded before the stylesheets, which hold rules and read these and define
 * none of their own. `theme_init.js` sets data-theme on <html>; dark mode is
 * the same names with different values, so a rule is written once. The
 * email body is the stated exception: mail clients need literal colours.
 */
:root {

    /* The design system (AUT-246; the approved proposal of 2026-10-08).
     * Colour says what to do, never where a value came from: the four
     * states below are the only colours with a meaning, and the brand's
     * own colours stay on the documents. The older names further down
     * read these, so a page written before the design system takes it up
     * without being edited. */
    --ink-900: #121a24;      /* text */
    --ink-700: #2d3a48;      /* secondary text */
    --ink-500: #5b6673;      /* labels, 5.8 : 1 on white */
    --ink-300: #9aa4af;      /* placeholders, disabled */
    --line: #dfe3e8;
    --line-strong: #c9d0d8;
    --bg: #f4f6f9;
    --surface: #ffffff;
    --surface-2: #f8f9fb;
    --hover: #eef1f5;
    --navy: #32465b;         /* the bar, the one primary action per view */
    --navy-700: #263545;
    --navy-100: #e5eaf0;
    --on-navy: #ffffff;
    /* Navy written AS TEXT: a chip's words on --navy-100, a ticker, a key
     * figure. Not --navy itself, which is a ground (the bar, a primary
     * button) and stays dark in both themes: as text on the dark theme's
     * surfaces it read 1.4 : 1 (AUT-427). */
    --navy-text: var(--navy);
    --link: #2f5d8c;
    --focus: #7aa7d6;
    --info: #34506b;
    --info-bg: #e8eef5;
    --info-line: #9fb4ca;
    /* The environment marker: amber, the same in both themes, so a test
     * server never passes for production. */
    --env-bg: #f2b552;
    --env-fg: #2b1d00;

    /* Type: 11 eyebrow, 12 label, 13 table, 14 body, 16 section, 20 page,
     * 28 key figure. Tabular figures wherever numbers line up. */
    --t-11: 11px;
    --t-12: 12px;
    --t-13: 13px;
    --t-14: 14px;
    --t-16: 16px;
    --t-20: 20px;
    --t-28: 28px;

    /* Space: a 4-point scale. Radius: 6 for controls, 10 for cards. */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --r-1: 6px;
    --r-2: 10px;
    /* Only what floats has a shadow: menus, dialogs, toasts. */
    --shadow-overlay: 0 8px 28px rgba(18, 26, 36, .14);

    /* Type */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-body: 'Inter', -apple-system, system-ui, sans-serif;

    /* One name per weight: a second set, --weight-*, said the same (AUT-387). */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-lg: 1rem;
    --text-xl: 1.125rem;
    --text-2xl: 1.5rem;

    /* Surfaces and text */
    --bg-body: var(--bg);
    --bg-surface: var(--surface);
    --bg-surface-secondary: var(--surface-2);
    --bg-hover: var(--hover);
    --text-primary: var(--ink-900);
    --text-secondary: var(--ink-500);
    --text-muted: var(--ink-300);
    --border-color: var(--line);
    --input-bg: var(--surface);
    --input-border: var(--line-strong);

    /* Brand */
    --primary-navy: var(--navy);
    --primary-color: var(--navy);
    --primary-hover: var(--navy-700);
    --accent-slate: var(--navy);
    --accent-color: var(--link);

    /* States. Bootstrap's palette, named once so a template does not have to
     * remember the hex. */
    --success-forest: #2e7d32;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --on-warning: #212529;
    /* Text printed ON a filled accent - a select2 chip, a primary button.
     * White in BOTH themes: the ground it sits on is the accent, not the page,
     * so it must not follow the surface the way --text-primary does. */
    --on-accent: #ffffff;

    /* Review states (AUT-244). Colour says what a person has to do, and
     * only that: check (amber), missing (red), confirmed (green). Where a
     * value came from is a label, never a colour. Text colours are AA on
     * their own grounds. */
    --state-check: #8a5200;
    --state-check-bg: #fff3dc;
    --state-check-line: #e3a23b;
    --state-missing: #a3241a;
    --state-missing-bg: #fdecea;
    --state-missing-line: #d5574a;
    --state-ok: #22682c;
    --state-ok-bg: #e5f2e7;
    --state-ok-line: #4b9a57;
    /* Field labels: 5.8 : 1 on white, where --text-muted is 2.1 : 1. */
    --text-label: var(--ink-500);

    /* Elevation */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    /* Shape and rhythm. New names, so nothing reads them yet - they exist so
     * the next radius or gap has somewhere to go other than a rule. */
    --radius-sm: 0.25rem;
    --radius: var(--r-1);
    --radius-lg: var(--r-2);
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 3rem;

    /* The KID (AUT-209). The PDF KID's own palette (kid_template_1), the
       same in both themes: a KID is a comparison document and is read on
       paper, so it does not take the brand or the dark theme. */
    --kid-paper: #ffffff;
    --kid-ink: #2B2F36;
    --kid-muted: #7A7F87;
    --kid-bar: #4C5666;
    --kid-head: #E4E6E9;
    --kid-band: #F0F1F3;
    --kid-alt: #F7F8F9;
    --kid-rule: #C9CDD3;
    --kid-highlight: #F0A22E;
    --kid-down: #D2691E;
    --kid-up: #5B9B3E;
    --kid-aside: #FAFBFC;
}

/* Only what differs. Everything above still applies. */
[data-theme="dark"] {
    --ink-900: #e6e9ed;
    --ink-700: #c4cbd3;
    --ink-500: #a7b0ba;
    --ink-300: #6b7580;
    --line: #2c333b;
    --line-strong: #3a434d;
    --bg: #0f1317;
    --surface: #171c21;
    --surface-2: #1d2329;
    --hover: #232a31;
    --navy-100: #22303e;
    --navy-text: #a9c3dd;    /* 7.4 : 1 on --navy-100, 9.4 : 1 on --surface */
    --link: #8db8e6;
    --focus: #5a8fc7;
    --info: #a9c3dd;
    --info-bg: #1a2633;
    --info-line: #4c6a88;
    --shadow-overlay: 0 8px 28px rgba(0, 0, 0, .5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --state-check: #f2b552;
    --state-check-bg: #2d2313;
    --state-check-line: #c98b2a;
    --state-missing: #f2897d;
    --state-missing-bg: #321a1a;
    --state-missing-line: #c4544a;
    --state-ok: #86c992;
    --state-ok-bg: #17291b;
    --state-ok-line: #4f9a5b;
}