/* Design tokens + self-hosted fonts. Loaded on every page before app.css and the page stylesheet.
 *
 * Fonts are self-hosted (static/fonts/*.woff2, latin subset) rather than pulled from the Google
 * Fonts CDN — no third-party runtime dependency, works offline, survives a strict CSP.
 *
 * Colour roles, and why they are what they are:
 *
 *   Gold is the brand, not the interface. #c4a168 on white is 2.4:1 — below even the 3:1 floor for
 *   large text — so gold may never carry text on a light surface. It appears on dark surfaces (where
 *   it reaches 8.7:1 against near-black) and as ornament. Where gold must read as text on light,
 *   use --brand-gold-deep.
 *
 *   Actions are ink. The brand already owns one high-contrast pairing — black against gold — so
 *   interaction leans on that rather than introducing a fifth hue into a UI that is already dense
 *   with status colour.
 *
 *   Status colours follow ANSI Z535 safety signage, the colour language of this industry: red is
 *   danger, orange is warning, yellow is caution, green is safe. Blue carries "no decision yet",
 *   which is why a pending submission is no longer orange — nothing is wrong with it. Caution
 *   yellow separates a renewal that is merely due from an approval that was refused.
 *
 *   Every foreground/background pair below clears WCAG AA (4.5:1). Status is always accompanied by
 *   its text label, so colour is never the sole carrier of meaning. */

/* ── Fonts ───────────────────────────────────────────────────────────────────────────────────── */

/* Display + isolated hero numerals. Rajdhani's digits are proportional (the "1" is 322/1000 em, the
   "4" is 526) so it must never set a column of numbers — headings and lone stat values only. */
@font-face {
    font-family: "Rajdhani";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/static/fonts/rajdhani-500.woff2") format("woff2");
}

@font-face {
    font-family: "Rajdhani";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/static/fonts/rajdhani-600.woff2") format("woff2");
}

@font-face {
    font-family: "Rajdhani";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/static/fonts/rajdhani-700.woff2") format("woff2");
}

/* Body, UI, and all aligned numeric data. One variable file spans 100–700; its digits are uniform
   600/1000 em by default, so numeric columns align without needing the `tnum` feature (which the
   latin subset does not ship). */
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url("/static/fonts/plex-sans-var.woff2") format("woff2");
}

/* The extracted-EMR source snippet, where the director reads the model's input verbatim. */
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/plex-mono-400.woff2") format("woff2");
}

:root {
    /* ── Brand ───────────────────────────────────────────────────────────────────────────────── */
    --brand-gold: #c4a168;        /* dark surfaces + ornament only — 2.4:1 on white */
    --brand-gold-deep: #6b5220;   /* gold as text on light surfaces — 7.4:1 on white */
    --brand-black: #0d0f12;       /* header bar, primary buttons */

    /* ── Ink (warm neutrals, tuned to sit with gold rather than against it) ──────────────────── */
    --ink-900: #16181d;           /* primary text, 16:1 */
    --ink-600: #5f6672;           /* secondary text, 5.8:1 */
    --ink-400: #868d99;           /* 3.6:1 — non-text and disabled only, never body copy */
    --ink-on-dark: #ffffff;       /* primary text on a dark surface (header, ink buttons, chips) */
    --ink-on-dark-muted: #d6d2cb; /* muted text on a dark surface (the auth panel blurb) */
    --line: #dcd8d0;              /* hairlines */
    --line-strong: #b9b3a8;       /* input borders, 3:1 against white */

    /* ── Surfaces ────────────────────────────────────────────────────────────────────────────── */
    --surface: #ffffff;
    --surface-sunken: #f0eeea;    /* page background */
    --surface-tint: #f9f7f3;      /* inset blocks, hover rows */
    --surface-ink: #16181d;       /* header, modal header */

    /* ── Status: safe ────────────────────────────────────────────────────────────────────────── */
    --ok-fg: #1f6b34;
    --ok-bg: #e6f2e9;
    --ok-edge: #2e7d32;

    /* ── Status: information — "no decision yet", not a warning ──────────────────────────────── */
    --info-fg: #2e5382;
    --info-bg: #e9eef5;
    --info-edge: #3d6ba5;

    /* ── Status: caution — renewal due, distinct from denial ─────────────────────────────────── */
    --caution-fg: #7a5c00;
    --caution-bg: #fdf6dd;
    --caution-edge: #b08900;

    /* ── Status: warning — a rate above its baseline ─────────────────────────────────────────── */
    --warn-fg: #9a4a06;
    --warn-bg: #fdefe3;
    --warn-edge: #d2691e;

    /* ── Status: danger — denied, expired ────────────────────────────────────────────────────── */
    --danger-fg: #a01b1b;
    --danger-bg: #fbe9e9;
    --danger-edge: #b71c1c;

    /* ── Type ────────────────────────────────────────────────────────────────────────────────── */
    --font-display: "Rajdhani", "Arial Narrow", sans-serif;
    --font-sans: "IBM Plex Sans", -apple-system, "Segoe UI", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --text-2xs: 0.6875rem;  /* 11px — uppercase labels; below this, caps stop being legible */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.8125rem;   /* 13px */
    --text-base: 0.875rem;  /* 14px — body */
    --text-lg: 1rem;        /* 16px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.625rem;   /* 26px */
    --text-3xl: 2.125rem;   /* 34px — stat values */

    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* Caps tracking. The old sheets used a flat 2px, which at 10px is a 20% stride — letters stop
       forming words. Proportional tracking keeps the industrial feel without the cost. */
    --tracking-caps: 0.08em;
    --tracking-caps-tight: 0.05em;

    /* ── Space (4px base) ────────────────────────────────────────────────────────────────────── */
    --space-1: 4px;
    --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;

    /* ── Radius — near-sharp. This is an instrument, not a consumer app. ─────────────────────── */
    --radius-sm: 2px;
    --radius-md: 3px;

    /* ── Elevation ───────────────────────────────────────────────────────────────────────────── */
    --shadow-card: 0 1px 2px rgba(22, 24, 29, 0.04), 0 1px 1px rgba(22, 24, 29, 0.06);
    --shadow-pop: 0 4px 12px rgba(22, 24, 29, 0.12);
    --shadow-modal: 0 24px 48px -12px rgba(22, 24, 29, 0.35);

    /* ── Motion ──────────────────────────────────────────────────────────────────────────────── */
    --dur-fast: 100ms;
    --dur: 180ms;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* ── Focus ───────────────────────────────────────────────────────────────────────────────── */
    --focus-ring: var(--ink-900);   /* on light surfaces */
    --focus-ring-dark: #ffffff;     /* on the black header — white, so it reads apart from the
                                       gold borders the nav buttons already carry */
    --focus-width: 2px;
    --focus-offset: 2px;
}