/* =========================================================================
   Latch Vector — design tokens.
   The only place a colour, type size, or spacing value gets defined.
   Every other stylesheet reads these custom properties; none hardcodes a
   hex value. Light is the printed claim form; dark is the same form on a
   billing terminal at 2am. The semantics never move: blue = resolved,
   red = flagged.

   Resolution order:
     1. :root                                   -> light (the default)
     2. @media dark, unless forced to light      -> system preference
     3. [data-theme="dark"|"light"]              -> explicit user choice wins
   ========================================================================= */

:root {
    /* Type families */
    --display: "Archivo", "Arial Narrow", sans-serif;
    --body: "Public Sans", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, monospace;

    /* Type scale */
    --text-display: clamp(2.55rem, 6.6vw, 5.1rem);
    --text-h1: clamp(1.9rem, 3.4vw, 2.9rem);
    --text-h2: clamp(2rem, 4.6vw, 3.6rem);
    --text-h3: 1.2rem;
    --text-h4: 0.98rem;
    --text-body: 1.0625rem;
    --text-small: 0.85rem;
    --text-mono: 0.76rem;

    /* Rhythm */
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --bay: clamp(4.5rem, 9vw, 8rem);
    --measure: 80ch;
    --container-max: 1180px;

    /* Shape */
    --radius: 2px;
    --radius-lg: 6px;
}

:root,
:root[data-theme="light"] {
    color-scheme: light;

    --paper: #edeff1;
    --field: #ffffff;
    --ink: #1a1f24;
    --ink-2: #5c6874;
    --ink-3: #8a949e;
    --rule: #d3d9de;
    --rule-2: #e4e8eb;
    --card-line: #1a1f24;

    --blue: #0c71d1;
    --blue-dk: #08549c;
    --blue-bg: #e8f1fb;
    --on-blue: #ffffff;

    --flag: #c8102e;
    --flag-bg: #fdecee;

    --slab-bg: #1a1f24;
    --slab-fg: #edeff1;
    --slab-fg-2: #a9b4bd;
    --slab-rule: #2b3238;

    --masthead-bg: rgba(255, 255, 255, 0.86);
    --shadow: rgba(26, 31, 36, 0.45);

    --focus-ring: var(--blue);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --paper: #0f1317;
        --field: #171d22;
        --ink: #e6ebef;
        --ink-2: #9aa6b1;
        --ink-3: #6f7b86;
        --rule: #2a323a;
        --rule-2: #1e252b;
        --card-line: #3a444d;

        --blue: #4c9eeb;
        --blue-dk: #8cc2f5;
        --blue-bg: rgba(76, 158, 235, 0.14);
        --on-blue: #06131f;

        --flag: #ff5c72;
        --flag-bg: rgba(255, 92, 114, 0.12);

        --slab-bg: #070b0e;
        --slab-fg: #e6ebef;
        --slab-fg-2: #8b959e;
        --slab-rule: #1c242a;

        --masthead-bg: rgba(15, 19, 23, 0.86);
        --shadow: rgba(0, 0, 0, 0.6);

        --focus-ring: var(--blue);
    }
}

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

    --paper: #0f1317;
    --field: #171d22;
    --ink: #e6ebef;
    --ink-2: #9aa6b1;
    --ink-3: #6f7b86;
    --rule: #2a323a;
    --rule-2: #1e252b;
    --card-line: #3a444d;

    --blue: #4c9eeb;
    --blue-dk: #8cc2f5;
    --blue-bg: rgba(76, 158, 235, 0.14);
    --on-blue: #06131f;

    --flag: #ff5c72;
    --flag-bg: rgba(255, 92, 114, 0.12);

    --slab-bg: #070b0e;
    --slab-fg: #e6ebef;
    --slab-fg-2: #8b959e;
    --slab-rule: #1c242a;

    --masthead-bg: rgba(15, 19, 23, 0.86);
    --shadow: rgba(0, 0, 0, 0.6);

    --focus-ring: var(--blue);
}