/* ============================================================================
   SIVD design tokens -- the single source of truth for the visual system.

   Loaded first on every page, before terminal.css, so every other stylesheet is
   a pure consumer. There is exactly ONE :root block in this project and it is
   below; tests/test_ux_trust_audit.py parses it, resolves every var() reference
   in every stylesheet, template and script against it, and recomputes the WCAG
   contrast of the colour tokens from these literal values rather than trusting
   the ratios written in the comments.

   That guard exists because two live var() references once pointed at tokens
   that were never defined (--color-brand, --text-heading). An invalid var()
   computes to the inherited value instead of failing, so the defect was silent.
   Add a token here before you reference it anywhere.

   Colour never carries meaning on its own -- see docs/UX_TRUST_AUDIT.md findings
   11-16. Every status colour in this file is paired with a glyph, a border style
   or a text label at its call site.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Typefaces. Self-hosted woff2 subsets, because the CSP is `default-src 'self'`
   with `font-src 'self'` at the edge -- a font CDN is blocked outright, and
   would hand visitor IPs to a third party. Licences: app/static/fonts/OFL.txt
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
   Tokens. Contrast ratios in the comments are measured, not asserted -- every
   one is recomputed from these literal values by the audit suite.
   --------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* --- Ground ------------------------------------------------------------ */
  --bg-ground: #fbfbfa;     /* page canvas */
  --bg-subtle: #f9fafb;     /* recessed band inside a surface */
  --bg-surface: #ffffff;    /* the default raised surface */
  --bg-panel: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-soft: #f3f4f6;       /* NON-TEXT fills only: zebra rows, plot areas,
                               disabled controls. --text-muted measures 4.39:1
                               here, below AA, so muted copy must not sit on it;
                               use --text-secondary. Enforced by
                               test_body_text_tokens_meet_wcag_aa. */
  --bg-selected: #eff5f2;   /* --primary at ~4% over white */

  /* --- Line -------------------------------------------------------------- */
  --border-subtle: #e5e7eb; /* the default hairline */
  --border-medium: #d1d5db; /* emphasis, table rules, dashed provenance borders */
  --border-focus: #0c3b2e;

  /* --- Ink ------------------------------------ on ground / on panel ------ */
  --text-primary: #111827;      /* 17.13 / 17.74 */
  --text-secondary: #374151;    /*  9.95 / 10.31 */
  --text-muted: #6b7280;        /*  4.67 /  4.83 -- see --bg-soft above */
  --text-highlight: #030712;    /* 19.45 / 20.13 */
  --text-accent: #0c3b2e;       /* 12.07 / 12.50 */
  --text-on-primary: #ffffff;   /* the only legitimate white text */
  --text-on-primary-rgb: 255, 255, 255;

  /* --- Brand ------------------------------------------------------------- */
  --primary: #0c3b2e;
  --primary-hover: #092e24;     /* 14.20 / 14.71 */
  --primary-accent: #103a2e;    /* the second green: rules, fills, chart ink */
  --accent-rgb: 12, 59, 46;     /* channels for rgba() tints of --primary */

  /* Channel triples, so a tint composes its alpha at the call site without the
     hue escaping the token layer. Every one matches the hex above it exactly. */
  --success-rgb: 15, 107, 69;
  --warning-rgb: 138, 90, 0;
  --error-rgb: 163, 21, 21;
  --info-rgb: 29, 78, 216;
  --analytical-rgb: 107, 33, 168;
  --severity-elev-rgb: 179, 67, 15;
  --shadow-rgb: 17, 24, 39;     /* one shadow ink, not two */

  /* --- Status -------------------- on its own 12% tint / on panel --------- */
  --success: #0f6b45;           /* 5.46 / 6.54 */
  --warning: #8a5a00;           /* 5.00 / 5.93 */
  --error: #a31515;             /* 6.33 / 7.85 */
  --info: #1d4ed8;              /* 5.57 / 6.70 -- the source-authority layer */
  --analytical: #6b21a8;        /* 7.07 / 8.72 -- the interpretation layer */

  /* --- Diagnostic severity ----------------------------------------------- */
  /* The four risk tiers. Each is paired with an icon and a text label at every
     call site; the tint is the same hue at 12% over white. */
  --severity-low: #0f6b45;      /* 5.46 / 6.54 */
  --severity-low-bg: rgba(15, 107, 69, 0.12);
  --severity-mod: #8a5a00;      /* 5.00 / 5.93 */
  --severity-mod-bg: rgba(138, 90, 0, 0.12);
  --severity-elev: #b3430f;     /* 4.71 / 5.64 */
  --severity-elev-bg: rgba(179, 67, 15, 0.12);
  --severity-crit: #a31515;     /* 6.33 / 7.85 */
  --severity-crit-bg: rgba(163, 21, 21, 0.12);

  /* --- State ------------------------------------------------------------- */
  --focus: #0c3b2e;             /* 12.07 on ground, 10.09 against a hairline */
  --disabled-fg: #9ca3af;
  --disabled-bg: #f3f4f6;
  --disabled-border: #e5e7eb;

  /* --- Type ---------------------------------------------------------------
     Three faces, three jobs, no fourth. The display serif is for major editorial
     headings only -- the masthead, a page title, the report heading. Everything
     structural is the sans. Everything quoted, coded or counted is the mono,
     including the verbatim clause blocks, where a proportional face would let a
     reader mistake a transcription for a paraphrase. */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;

  --size-3xs: 0.6875rem;   /* 11px -- mono micro-labels */
  --size-2xs: 0.75rem;     /* 12px -- metadata, provenance chips */
  --size-xs: 0.8125rem;    /* 13px -- table cells, dense body */
  --size-sm: 0.875rem;     /* 14px -- default UI text */
  --size-md: 1rem;         /* 16px -- body */
  --size-lg: 1.125rem;     /* 18px -- card title */
  --size-xl: 1.25rem;      /* 20px -- section title */
  --size-2xl: 1.5rem;      /* 24px -- page title */
  --size-3xl: 1.875rem;    /* 30px -- display */
  --size-4xl: 2.5rem;      /* 40px -- hero display, the 404 numeral */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-none: 1;       /* icon boxes and single-line numerals only */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.08em;

  /* --- Space ---------------------------------------------------------------
     A 4px grid. The 35 distinct rem values these stylesheets used to carry all
     resolve to one of these ten steps, none of them moving by more than 4px. */
  --space-1: 0.25rem;      /*  4px */
  --space-2: 0.5rem;       /*  8px */
  --space-3: 0.75rem;      /* 12px */
  --space-4: 1rem;         /* 16px */
  --space-5: 1.25rem;      /* 20px */
  --space-6: 1.5rem;       /* 24px */
  --space-7: 2rem;         /* 32px */
  --space-8: 2.5rem;       /* 40px */
  --space-9: 3rem;         /* 48px */
  --space-10: 4rem;        /* 64px */

  /* --- Radius --------------------------------------------------------------
     By component importance, not uniformly. A sort indicator is not a modal. */
  --radius-xs: 2px;        /* chips, inline marks, indicators */
  --radius-sm: 4px;        /* inputs, buttons, badges */
  --radius-md: 6px;        /* cards, panels, option cards */
  --radius-lg: 10px;       /* drawer, modal, hero -- major surfaces only */
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* --- Elevation -----------------------------------------------------------
     Borders and whitespace carry hierarchy here. A shadow is for a surface that
     genuinely floats above the page: the drawer, the deal modal, the sticky
     preview. Nothing else gets one. */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-md: 0 4px 12px -2px rgba(17, 24, 39, 0.08);
  --shadow-overlay: -8px 0 24px rgba(17, 24, 39, 0.1);

  /* --- Motion -------------------------------------------------------------- */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 240ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* --- Layering ------------------------------------------------------------ */
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal: 1001;

  /* --- Layout -------------------------------------------------------------- */
  --max-width: 1440px;
}

/* ---------------------------------------------------------------------------
   Type roles. Ten named jobs, so a heading's size is a decision about what the
   heading IS rather than a number picked at the call site. Component rules in
   the other stylesheets consume the same tokens, so the two routes agree.
   --------------------------------------------------------------------------- */

.type-display {
  font-family: var(--font-display);
  font-size: var(--size-3xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.type-page-title {
  font-family: var(--font-display);
  font-size: var(--size-2xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.type-section-title {
  font-family: var(--font-sans);
  font-size: var(--size-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.type-card-title {
  font-family: var(--font-sans);
  font-size: var(--size-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.type-body {
  font-family: var(--font-sans);
  font-size: var(--size-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.type-metadata {
  font-family: var(--font-sans);
  font-size: var(--size-2xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.type-label {
  font-family: var(--font-mono);
  font-size: var(--size-3xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

.type-kpi {
  font-family: var(--font-mono);
  font-size: var(--size-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* Applied alongside another role, not instead of one: it only fixes the digits
   so a column of figures aligns. */
.type-numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.type-code {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

/* ---------------------------------------------------------------------------
   Reduced motion. Honoured from the token layer so it applies on every surface
   regardless of which component stylesheets a page happens to load.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}