/* ==========================================================================
   DDI analyst workspace — design tokens ("the reviewer's desk")
   Warm graphite in both themes, dark and light. The frame (rail and top bar)
   is cut from the same ramp as the work surfaces: one desk, no separate shell.

   Theme: follows prefers-color-scheme; a saved choice (app.js) sets
   data-theme="light" | "dark" on <html> and wins both ways.

   Colour has few jobs, and always travels with an icon or words:
     ember       the accent: the primary choice, the selection, what needs
                 the analyst (--accent-*, --warn-*), and the highlighter
                 mark on quoted evidence (--hl)
     red         red flag / confirmed match / conflict   (--danger-*, --redflag)
     green       verified / accepted / clear             (--high-*, --ok-*)
     neutral     pending, gaps, not checked: the ramp's own steps
                 (--med-*, --low-*, --gap-*)
   Surfaces are separated by tone steps and hairlines; shadows only on what
   floats (the drawer, popovers, dialogs, the selected finding).
   Every text/background pair meets WCAG AA in both themes.
   ========================================================================== */

@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/vendor/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/vendor/fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/vendor/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/vendor/fonts/newsreader-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/vendor/fonts/newsreader-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/vendor/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/vendor/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

/* ---------------------------------------------------------------- light (and every theme-free token) */

:root {
  color-scheme: light;
  /* the frame: the same desk as the work surfaces */
  --shell-bg: #fbfaf8;
  --shell-2: #f1eee9;
  --shell-3: #e7e3dd;
  --shell-border: #e2ded7;
  --shell-text: #1c1a17;
  --shell-text-2: #57514a;
  --shell-accent: #c4501d;
  /* surfaces: page, card, a step up, a step further */
  --bg: #f4f2ee;
  --surface: #fbfaf8;
  --surface-2: #f7f5f2;
  --surface-3: #ebe8e3;
  --overlay: rgba(28, 26, 23, 0.42);
  --border: #e2ded7;
  --border-strong: #cdc7be;
  /* text: three roles */
  --text: #1c1a17;
  --text-2: #57514a;
  --text-3: #6f685f;
  --text-inverse: #fbfaf8;
  /* the primary button: ink on the light desk */
  --primary-bg: #1c1a17;
  --primary-fg: #fbfaf8;
  --primary-hover: #36322d;
  /* the accent: ember */
  --accent: #c4501d;
  --accent-hover: #a8441a;
  --accent-soft: #fbeee6;
  --accent-soft-2: #f3d3c0;
  --accent-text: #a8441a;
  --on-accent: #ffffff;
  --focus: #c4501d;
  /* the highlighter on quoted evidence, and the paper it is drawn on */
  --hl: #ffc999;
  --paper: #fdfbf7;
  --paper-text: #1f1b16;
  --paper-text-2: #5e554a;
  --paper-rule: #e6dfd4;
  /* signal: green (verified, accepted, clear, High) */
  --high-bg: #ebf3ed;  --high-text: #2c6b45;  --high-border: #c4dccb;  --high-solid: #357a51;
  /* pending and Medium: neutral, not a colour */
  --med-bg: #efece7;   --med-text: #57514a;   --med-border: #d8d3cb;   --med-solid: #8a8378;
  /* gap, not checked, Low: neutral */
  --low-bg: #efece7;   --low-text: #57514a;   --low-border: #d8d3cb;   --low-solid: #9a938a;
  /* signal: red (red flag, confirmed match, conflict) */
  --danger: #c0322b;  --danger-hover: #a52a24;  --danger-bg: #fbeceb;  --danger-text: #a52a24;  --danger-border: #efc4c0;
  --redflag: #c0322b;
  /* needs the analyst: an ember tint */
  --warn-bg: var(--accent-soft);  --warn-text: var(--accent-text);  --warn-border: #f0cfbb;
  --ok-bg: var(--high-bg);  --ok-text: var(--high-text);  --ok-border: var(--high-border);
  --info-bg: var(--surface-2);  --info-text: var(--text-2);  --info-border: var(--border);
  --violet-bg: var(--surface-3);  --violet-text: var(--text-2);
  /* gaps: a quiet step, no hatching */
  --gap-stripe: transparent;
  --gap-bg: var(--surface-2);
  /* labels set inside solid signal fills */
  --ink-on-solid: #ffffff;
  --ink-on-dark: #ffffff;
  --on-danger: #ffffff;
  --on-slate: #ffffff;
  /* form controls: boundaries meet 3:1 (WCAG 1.4.11) */
  --input-border: #948c81;
  /* space (4px grid) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  /* radius */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;
  /* shadow: only on what floats */
  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(28, 26, 23, 0.06);
  --shadow-md: 0 8px 24px rgba(28, 26, 23, 0.08), 0 1px 2px rgba(28, 26, 23, 0.05);
  --shadow-lg: 0 24px 56px rgba(28, 26, 23, 0.16), 0 4px 12px rgba(28, 26, 23, 0.06);
  --lift: 0 1px 2px rgba(28, 26, 23, 0.05), 0 10px 24px -10px rgba(28, 26, 23, 0.18);
  --glow: none;
  /* type */
  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 19px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 36px;
  --lh: 1.5;
  /* layout */
  --rail-w: 72px;
  --topbar-h: 52px;
  --dossier-h: 0px; /* the sticky dossier header's height, on case pages */
  --nav-w: 236px;
  --drawer-w: 440px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------- dark: the system setting, unless light was chosen */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --shell-bg: #121110;
    --shell-2: #1d1b19;
    --shell-3: #272421;
    --shell-border: #252321;
    --shell-text: #efebe5;
    --shell-text-2: #a8a299;
    --shell-accent: #f0793f;
    --bg: #161513;
    --surface: #1c1a18;
    --surface-2: #201e1c;
    --surface-3: #292623;
    --overlay: rgba(0, 0, 0, 0.6);
    --border: #2b2825;
    --border-strong: #3d3935;
    --text: #efebe5;
    --text-2: #aaa49b;
    --text-3: #8f897f;
    --text-inverse: #161513;
    --primary-bg: #efebe5;
    --primary-fg: #161513;
    --primary-hover: #ffffff;
    --accent: #f0793f;
    --accent-hover: #f4925f;
    --accent-soft: #2c1d15;
    --accent-soft-2: #4a2a19;
    --accent-text: #f4a174;
    --on-accent: #1a0f09;
    --focus: #f4a174;
    --high-bg: #18231c;  --high-text: #86cfa3;  --high-border: #2c4a37;  --high-solid: #5bb382;
    --med-bg: #242220;   --med-text: #aaa49b;   --med-border: #3d3935;   --med-solid: #8f897f;
    --low-bg: #242220;   --low-text: #aaa49b;   --low-border: #3d3935;   --low-solid: #6f6a62;
    --danger: #e5484d;  --danger-hover: #ec6a6e;  --danger-bg: #2a1716;  --danger-text: #ff9592;  --danger-border: #5a2a28;
    --redflag: #e5484d;
    --warn-border: #4a2a19;
    --ink-on-solid: #161513;
    --on-danger: #161513;
    --on-slate: #161513;
    --input-border: #766f66;
    --gap-bg: var(--surface-2);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
    --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.6);
    --lift: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 28px -12px rgba(0, 0, 0, 0.75);
  }
}

/* ---------------------------------------------------------------- dark: chosen in the theme switch */

:root[data-theme="dark"] {
  color-scheme: dark;
  --shell-bg: #121110;
  --shell-2: #1d1b19;
  --shell-3: #272421;
  --shell-border: #252321;
  --shell-text: #efebe5;
  --shell-text-2: #a8a299;
  --shell-accent: #f0793f;
  --bg: #161513;
  --surface: #1c1a18;
  --surface-2: #201e1c;
  --surface-3: #292623;
  --overlay: rgba(0, 0, 0, 0.6);
  --border: #2b2825;
  --border-strong: #3d3935;
  --text: #efebe5;
  --text-2: #aaa49b;
  --text-3: #8f897f;
  --text-inverse: #161513;
  --primary-bg: #efebe5;
  --primary-fg: #161513;
  --primary-hover: #ffffff;
  --accent: #f0793f;
  --accent-hover: #f4925f;
  --accent-soft: #2c1d15;
  --accent-soft-2: #4a2a19;
  --accent-text: #f4a174;
  --on-accent: #1a0f09;
  --focus: #f4a174;
  --high-bg: #18231c;  --high-text: #86cfa3;  --high-border: #2c4a37;  --high-solid: #5bb382;
  --med-bg: #242220;   --med-text: #aaa49b;   --med-border: #3d3935;   --med-solid: #8f897f;
  --low-bg: #242220;   --low-text: #aaa49b;   --low-border: #3d3935;   --low-solid: #6f6a62;
  --danger: #e5484d;  --danger-hover: #ec6a6e;  --danger-bg: #2a1716;  --danger-text: #ff9592;  --danger-border: #5a2a28;
  --redflag: #e5484d;
  --warn-border: #4a2a19;
  --ink-on-solid: #161513;
  --on-danger: #161513;
  --on-slate: #161513;
  --input-border: #766f66;
  --gap-bg: var(--surface-2);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.6);
  --lift: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 28px -12px rgba(0, 0, 0, 0.75);
}