/* ============================================================================
   COUNCIL INSIGHT — Design Tokens
   Colors + Type foundations for both surfaces of the brand:

   1. THE CONSOLE  — dark "research terminal" chrome (app + marketing).
   2. THE PAPER    — light cream editorial surface the reviewed document
                     renders onto (the council's annotated output).

   The SEVERITY SYSTEM is shared, functional color — the council grades
   every concern 🔴 / 🟡 / 🟢 / 🔵 / ✏️ and those hues are load-bearing,
   never decorative.

   Fonts are served from Google Fonts (see fonts/fonts.css). The same three
   families appear verbatim in the product's real rendered artifacts.
   ============================================================================ */

@import url("fonts/fonts.css");

:root {
  /* ---------------------------------------------------------------------- */
  /* TYPE FAMILIES                                                          */
  /* ---------------------------------------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;   /* editorial display, has optical sizing */
  --font-serif:   "Source Serif 4", Georgia, serif;                /* long-form reading */
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* labels, data, code, eyebrows */
  --font-sans:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* dense UI chrome */

  /* Fraunces is variable on optical size + weight. These feature settings
     keep numerals tabular & lining wherever figures are compared. */
  --num-tabular: "tnum" 1, "lnum" 1;

  /* ---------------------------------------------------------------------- */
  /* TYPE SCALE  (px → rem on a 16px base)                                  */
  /* ---------------------------------------------------------------------- */
  --t-display:  clamp(2.6rem, 1.6rem + 3.4vw, 4.25rem); /* hero */
  --t-h1:       2.25rem;   /* 36 */
  --t-h2:       1.625rem;  /* 26 */
  --t-h3:       1.25rem;   /* 20 */
  --t-h4:       1rem;      /* 16 */
  --t-lead:     1.1875rem; /* 19 — paper body / deck */
  --t-body:     1.0625rem; /* 17 — paper reading size */
  --t-ui:       0.9375rem; /* 15 */
  --t-sm:       0.8125rem; /* 13 */
  --t-xs:       0.75rem;   /* 12 */
  --t-eyebrow:  0.6875rem; /* 11 — mono eyebrow / kicker */

  --lh-tight:   1.12;
  --lh-snug:    1.3;
  --lh-body:    1.55;
  --lh-loose:   1.65;

  --tracking-eyebrow: 0.14em;
  --tracking-label:   0.06em;
  --tracking-tight:  -0.01em;
  --tracking-display:-0.02em;

  /* ---------------------------------------------------------------------- */
  /* THE CONSOLE — dark research-terminal palette (warm-neutral, NOT blue)  */
  /* ---------------------------------------------------------------------- */
  --ink-900: #0E0F11;   /* canvas / void */
  --ink-850: #131417;
  --ink-800: #16181B;   /* surface */
  --ink-750: #1B1D21;
  --ink-700: #1F2227;   /* raised card */
  --ink-650: #262A30;
  --ink-600: #2E323A;   /* strong hairline / inset border */

  --line:        rgba(236, 231, 221, 0.10);  /* default hairline on dark */
  --line-strong: rgba(236, 231, 221, 0.18);
  --line-faint:  rgba(236, 231, 221, 0.055);

  /* warm bone/parchment ink reads as editorial, not clinical white */
  --bone:        #ECE7DD;  /* primary text on dark */
  --bone-soft:   #B7B1A5;  /* secondary text */
  --bone-muted:  #807B72;  /* tertiary / captions */
  --bone-faint:  #5A564F;  /* disabled / watermark */

  /* ---------------------------------------------------------------------- */
  /* BRAND SIGNAL — crimson. The "Red Team's pen" — the council red-teams    */
  /* every document, so the brand accent is red ink, not amber.             */
  /* Deliberately COOLER + more vivid than the earthy severity-critical      */
  /* brick (#C0392B) so brand-red and error-red read as different things.    */
  /* Used sparingly: active state, the brand mark, key data, focus.          */
  /* ---------------------------------------------------------------------- */
  --signal:        #D62B3A;
  --signal-bright: #EE4B59;
  --signal-deep:   #9E1623;
  --signal-tint:   rgba(214, 43, 58, 0.14);
  --signal-line:   rgba(214, 43, 58, 0.42);
  --on-signal:     #FFF3F2;  /* text/icons on a filled signal surface */

  /* ---------------------------------------------------------------------- */
  /* THE PAPER — light cream editorial surface (the reviewed document)      */
  /* ---------------------------------------------------------------------- */
  --paper:        #FDFCF9;  /* page */
  --paper-alt:    #F5F3EE;  /* table head / inset panel */
  --paper-sink:   #EFEDE6;  /* deeper inset */
  --paper-ink:    #1A1A1A;  /* primary */
  --paper-soft:   #4A4A4A;  /* secondary */
  --paper-muted:  #6B6B6B;  /* captions / detail */
  --paper-rule:   #E6E6E6;  /* hairline */
  --paper-rule-strong: #1A1A1A;

  /* ---------------------------------------------------------------------- */
  /* SEVERITY SYSTEM — functional grading color (shared, load-bearing)      */
  /* rail = accent edge · tint = light fill · ink = text-on-tint            */
  /* Mirrors the renderer exactly so design output matches product output.  */
  /* ---------------------------------------------------------------------- */
  --sev-critical-rail: #C0392B;  --sev-critical-tint: #FDECEA;  --sev-critical-ink: #7B1F15;
  --sev-material-rail: #D68910;  --sev-material-tint: #FEF5E7;  --sev-material-ink: #7A4C08;
  --sev-polish-rail:   #229954;  --sev-polish-tint:   #E8F8F0;  --sev-polish-ink:   #0E5128;
  --sev-verify-rail:   #2874A6;  --sev-verify-tint:   #EBF5FB;  --sev-verify-ink:   #154360;
  --sev-craft-rail:    #6C757D;  --sev-craft-tint:    #F1F3F5;  --sev-craft-ink:    #343A40;
  --sev-coherence-rail:#6E5499;  --sev-coherence-tint:#F1ECF7;  --sev-coherence-ink:#3E2C5A;

  /* Severity on dark — same hues, lifted for legibility on the console.
     Fills are translucent so they sit naturally on any ink layer. */
  --sev-critical-on-dark: #F06A5C;  --sev-critical-fill: rgba(192, 57, 43, 0.18);
  --sev-material-on-dark: #F0B454;  --sev-material-fill: rgba(214, 137, 16, 0.18);
  --sev-polish-on-dark:   #4FC07E;  --sev-polish-fill:   rgba(34, 153, 84, 0.18);
  --sev-verify-on-dark:   #5AA8DC;  --sev-verify-fill:   rgba(40, 116, 166, 0.18);
  --sev-craft-on-dark:    #A6AEB6;  --sev-craft-fill:    rgba(108, 117, 125, 0.20);
  --sev-coherence-on-dark:#B79BD6;  --sev-coherence-fill:rgba(110, 84, 153, 0.22);

  /* Status pills (diagnostics): a verdict read, not a severity.            */
  --status-pos: #229954;  --status-pos-tint: #E8F8F0;
  --status-neu: #D68910;  --status-neu-tint: #FEF5E7;
  --status-neg: #C0392B;  --status-neg-tint: #FDECEA;

  /* ---------------------------------------------------------------------- */
  /* RADII — tight & institutional. Sharp, not soft.                        */
  /* ---------------------------------------------------------------------- */
  --r-xs: 2px;
  --r-sm: 3px;
  --r:    6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* ---------------------------------------------------------------------- */
  /* ELEVATION — restrained. The console leans on hairlines, not shadow.    */
  /* ---------------------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow:     0 4px 16px rgba(0, 0, 0, 0.36);
  --shadow-lg:  0 18px 50px rgba(0, 0, 0, 0.50);
  --shadow-paper: 0 1px 3px rgba(26, 24, 18, 0.06), 0 10px 30px rgba(26, 24, 18, 0.05);
  --inset-line: inset 0 0 0 1px var(--line);

  /* ---------------------------------------------------------------------- */
  /* SPACING — 4px base                                                     */
  /* ---------------------------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  --measure: 68ch;          /* reading column */
  --shell: 1200px;          /* max content width */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* calm, no bounce */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 180ms;
  --dur-slow: 320ms;
}

/* ============================================================================
   SEMANTIC ELEMENT STYLES
   Two namespaces. `.console` for the dark chrome, `.paper` for the editorial
   document surface. Apply one to a wrapper and the children inherit the right
   foundation.
   ============================================================================ */

/* ---- THE CONSOLE (dark) ---------------------------------------------------- */
.console {
  background: var(--ink-900);
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: var(--t-ui);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.console h1, .console h2, .console h3 { font-family: var(--font-display); color: var(--bone); }
.console h1 { font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); font-weight: 540; margin: 0 0 .4em; }
.console h2 { font-size: var(--t-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 540; margin: 0 0 .4em; }
.console h3 { font-size: var(--t-h3); line-height: var(--lh-snug); font-weight: 560; margin: 0 0 .35em; }
.console p  { color: var(--bone-soft); margin: 0 0 1em; }

/* The mono eyebrow / kicker — the terminal's signature label. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.eyebrow--muted { color: var(--bone-muted); }

/* mono data label */
.label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--bone-muted);
}
.console code, .console kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--signal-bright);
  background: rgba(255,255,255,0.05);
  padding: 0.1em 0.4em;
  border-radius: var(--r-xs);
}

/* ---- THE PAPER (light editorial) ------------------------------------------ */
.paper {
  background: var(--paper);
  color: var(--paper-ink);
  font-family: var(--font-serif);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
.paper h1, .paper h2, .paper h3, .paper h4 { font-family: var(--font-display); color: var(--paper-ink); letter-spacing: var(--tracking-tight); }
.paper h1 { font-size: var(--t-h1); line-height: var(--lh-tight); font-weight: 600; margin: 0 0 .4em; }
.paper h2 { font-size: var(--t-h2); line-height: var(--lh-snug); font-weight: 580; margin: 1.6em 0 .4em; padding-top: .5em; border-top: 1px solid var(--paper-rule); }
.paper h3 { font-size: var(--t-h3); line-height: var(--lh-snug); font-weight: 580; margin: 1.4em 0 .35em; }
.paper h4 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--paper-soft); font-family: var(--font-mono); margin: 1.4em 0 .4em; }
.paper p  { margin: 0 0 .85em; }
.paper .byline { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--paper-muted); }
.paper code { font-family: var(--font-mono); font-size: 0.88em; background: var(--paper-alt); padding: 0.1em 0.35em; border-radius: var(--r-xs); }
.paper .num, .paper [data-num] { font-feature-settings: var(--num-tabular); }

/* Shared utility: tabular figures wherever numbers are compared */
.tnum { font-feature-settings: var(--num-tabular); font-variant-numeric: tabular-nums lining-nums; }