/* ============================================================================
   ConsentIQ — Design Tokens · single source of truth
   ----------------------------------------------------------------------------
   Plain CSS, no build step. Link this ONE file into every page:
       <link rel="stylesheet" href="tokens.css">
   …then delete the duplicated inline :root block from each page.

   Two tiers:
     • PRODUCTION  — the live tokens, verbatim. Do not change values here without
                     a deliberate brand decision; 18 pages read them.
     • EXTENSIONS  — net-new tokens the design system adds (fonts, type ramp,
                     radii, shadow, spacing, the secondary accent, aliases).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* ===================== PRODUCTION (canonical) ===================== */

  /* brand — teal */
  --teal:#1A7A6E;  --teal-mid:#2A9D8F;  --teal-light:#E6F4F2;  --teal-dim:#0F4E46;

  /* status */
  --amber:#E67E22; --amber-light:#FEF3E8;
  --red:#C0392B;   --red-light:#FDECEA;
  --green:#27AE60; --green-light:#E8F8EE;
  --purple:#7C3AED;--purple-light:#F0E6FF;

  /* ink + surfaces */
  --ink:#1C1F22;   --ink-mid:#3D4349;   --ink-light:#6B7280;
  --rule:#E2E6EA;  --bg:#F4F6F7;        --surface:#FFFFFF;

  /* layout */
  --sidebar-w:248px; --header-h:56px; --panel-w:360px;
  --sidebar-rail-w:64px;   /* EXTENSION — collapsed sidebar width (app-shell) */

  /* ===================== EXTENSIONS (new) ===================== */

  /* — type families —
     display: Fraunces · headings, hero, figures of note
     sans:    Public Sans · body + all UI
     mono:    IBM Plex Mono · clause refs, rule IDs, numerics
     Rebrand confirmed — replaces production Instrument Serif / DM Sans / DM Mono. */
  --font-display:'Fraunces', Georgia, serif;
  --font-sans:'Public Sans', system-ui, -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* — type ramp (px) — */
  --t-hero:44px; --t-h1:30px; --t-h2:22px; --t-h3:18px;
  --t-body:14px; --t-sm:13px; --t-xs:12px; --t-mono:12px;

  /* — secondary accent —
     A calm slate-blue for the analysis / "design & clause" track. Distinct from
     teal (brand) and from the status hues, which carry meaning. NEW hue. */
  --slate:#3F6E8C; --slate-mid:#5B89A6; --slate-light:#E8F0F5; --slate-dim:#2A4A60;

  /* — teal helper tints (progress fills, soft surfaces) — */
  --teal-tint:#EAF5F3; --teal-line:#CDE6E1;

  /* — severity (semantic names → status hues) — */
  --sev-high:var(--red); --sev-med:var(--amber); --sev-low:#A9B0B7;

  /* — radii — */
  --r-sm:7px; --r-md:10px; --r-lg:14px; --r-pill:999px;

  /* — elevation — */
  --sh-sm:0 1px 2px rgba(28,31,34,.05);
  --sh-md:0 4px 14px rgba(28,31,34,.08);
  --sh-lg:0 16px 44px rgba(28,31,34,.18);

  /* — spacing scale — */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* ===================== SEMANTIC ALIASES =====================
     Prefer these in component CSS so a future retune touches one line. */
  --text-strong:var(--ink);
  --text-body:var(--ink-mid);
  --text-muted:var(--ink-light);

  --surface-card:var(--surface);
  --surface-sunk:var(--bg);
  --border:var(--rule);
  --border-soft:#EEF1F3;

  --brand:var(--teal);
  --brand-strong:var(--teal-dim);
  --brand-tint:var(--teal-light);
  --brand-line:var(--teal-line);
}