/* ============================================================
   Zefra design tokens — single source of truth for all pages.
   Identity: "spectral teal on instrument black".
   Canvas and inks are tinted toward the accent hue (~180°) at
   very low chroma so the whole UI reads as one material.
   Full rationale + contrast audit: ../BRAND.md
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400..800&family=JetBrains+Mono:wght@400..700&display=swap');

:root{
  color-scheme:dark;

  /* --- typography --- */
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Cascadia Code',Consolas,monospace;

  /* --- surface elevation ramp (darkest → lightest) --- */
  --bg:#0a0f10;        /* app canvas */
  --panel:#11181a;     /* cards, header */
  --elevated:#141c1e;  /* dropdowns, modals, toasts */
  --panel2:#182124;    /* inputs, nested surfaces */
  --chip:#1d282b;      /* chips, ghost buttons */

  /* --- lines --- */
  --line:#263335;      /* hairline borders, dividers */

  /* --- ink (text) ramp --- */
  --txt:#e7edec;       /* primary — 15.2:1 on panel */
  --muted:#9fb0ac;     /* secondary — 7.9:1 on panel */
  --dim:#7a8a86;       /* metadata/placeholder — 5.0:1 on panel */

  /* --- accent: spectral teal --- */
  --accent:#3fd6c1;                       /* 9.9:1 on panel */
  --accent-ink:#04211d;                   /* text on accent fills — 9.4:1 */
  --accent-weak:rgba(63,214,193,.12);     /* tint wash */
  --accent-line:rgba(63,214,193,.42);     /* accent borders */
  --accent-chip-line:#2a4a52;             /* chip borders (accent + tier2) */
  --accent-glow:0 0 0 1px rgba(63,214,193,.32), 0 0 18px -2px rgba(63,214,193,.25);

  /* --- semantic status --- */
  --good:#5fd48a;      /* 9.6:1 on panel */
  --warn:#f0b45c;      /* 9.7:1 on panel */
  --bad:#f07a7a;       /* 6.6:1 on panel */
  --applied:#b58cff;   /* 7.0:1 on panel */
  --tier2:#8ec5ff;     /* 9.9:1 on panel */
  --good-line:#2f5a41; --warn-line:#5a4a2f; --bad-line:#5a2f2f;

  /* --- match-score tiers --- */
  --score-hi:#5fd48a;  --score-hi-bd:rgba(95,212,138,.42);  --score-hi-bg:rgba(95,212,138,.09);
  --score-mid:#f0b45c; --score-mid-bd:rgba(240,180,92,.40); --score-mid-bg:rgba(240,180,92,.08);
  --score-low:#9fb0ac; --score-low-bd:var(--line);          --score-low-bg:var(--panel2);

  /* --- elevation shadows (overlays only — resting surfaces use borders) --- */
  --e-2:0 8px 28px rgba(0,0,0,.48);
  --e-3:0 20px 60px rgba(0,0,0,.58);

  /* --- radius --- */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:14px; --r-pill:999px;

  /* --- spacing (4px base) --- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;

  /* --- focus ring --- */
  --ring:0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* --- base primitives (pages may override) --- */
body{background:var(--bg);color:var(--txt);font-family:var(--font-ui)}
::selection{background:rgba(63,214,193,.30);color:#eafffb}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}