/* ============================================================
   disclosureIQ — design tokens
   Copied from design-system/colors_and_type.css.
   Source of truth: the design system. Do not edit values here;
   regenerate from the design system if it changes.

   Fonts are currently Google-Fonts hosted. Self-host before
   Phase 1 launch (Week 8 polish task).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500;1,8..60,600&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* =====================================================
     COLOR — warm cream surface, warm ink foreground
     ===================================================== */

  /* Surface (cream family — warm off-white, never #FFF) */
  --cream-50:  #F7F2E4;
  --cream-100: #F1EADB;  /* PAGE BACKGROUND. Non-negotiable. */
  --cream-200: #E8DFC9;
  --cream-300: #D9CFB2;
  --cream-400: #C5B894;

  /* Foreground (ink — warm, never #000) */
  --ink-900:   #1A1612;
  --ink-800:   #2A2520;
  --ink-700:   #44382F;
  --ink-600:   #5C4D40;
  --ink-500:   #7A6B5C;
  --ink-400:   #9A8B7B;
  --ink-300:   #B8AB99;
  --ink-200:   #D4C9B6;

  /* Expert-category palette */
  --cat-politician: #3A4452;
  --cat-fund:       #1F4D3F;
  --cat-insider:    #A8762A;
  --cat-activist:   #8A1B2E;

  /* Politician sub-indicator (party) */
  --party-r: #8A1B2E;
  --party-d: #1E3A5F;
  --party-i: #6F5F52;

  /* Editorial accent — aged aubergine. Convergence rule, italic phrase color
     in headlines, active nav, link hover, brand dot. */
  --accent: #5A2B4A;
  --accent-soft: #B9A1AE;

  /* Semantic (non-chromatic for trade direction) */
  --action-buy:  var(--ink-900);
  --action-sell: var(--ink-500);

  /* =====================================================
     TYPE
     ===================================================== */

  --serif:        "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans:         "Geist", "Söhne", "Helvetica Neue", Helvetica, sans-serif;
  --mono:         "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --mono-brand:   "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  --t-display-xl: 64px;
  --t-display-l:  48px;
  --t-display-m:  36px;
  --t-display-s:  28px;
  --t-h1:         22px;
  --t-h2:         18px;
  --t-body-l:     17px;
  --t-body:       15px;
  --t-body-s:     13px;
  --t-meta:       12px;
  --t-micro:      11px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.4;
  --lh-relax: 1.55;
  --lh-read:  1.65;

  --tr-tight: -0.02em;
  --tr-base:   0;
  --tr-wide:   0.04em;
  --tr-caps:   0.08em;

  /* =====================================================
     SPACING (4px base)
     ===================================================== */
  --s-0:  0;
  --s-1:  2px;
  --s-2:  4px;
  --s-3:  8px;
  --s-4:  12px;
  --s-5:  16px;
  --s-6:  20px;
  --s-7:  24px;
  --s-8:  32px;
  --s-9:  40px;
  --s-10: 48px;
  --s-11: 64px;
  --s-12: 80px;
  --s-13: 96px;
  --s-14: 128px;

  /* =====================================================
     LAYOUT
     ===================================================== */
  --container:      1180px;
  --container-read: 720px;
  --gutter:         24px;
  --col:            12;

  /* =====================================================
     BORDERS / RADII
     ===================================================== */
  --hairline:        1px solid var(--cream-300);
  --hairline-strong: 1px solid var(--cream-400);
  --rule-ink:        1px solid var(--ink-900);
  --rule-accent:     2px solid var(--accent);

  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;

  /* =====================================================
     MOTION
     ===================================================== */
  --dur-fast:   80ms;
  --dur-base:  120ms;
  --dur-slow:  200ms;
  --ease:      cubic-bezier(.2, 0, 0, 1);

  /* =====================================================
     SEMANTIC ALIASES
     ===================================================== */
  --bg:           var(--cream-100);
  --bg-elev:      var(--cream-50);
  --bg-hover:     var(--cream-200);
  --fg:           var(--ink-900);
  --fg-body:      var(--ink-700);
  --fg-meta:      var(--ink-500);
  --fg-faint:     var(--ink-400);
  --border:       var(--cream-300);
  --border-strong:var(--cream-400);
}

/* ============================================================
   SEMANTIC ELEMENTS
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display weights deliberately LIGHT — Atlantic / New Yorker / Stratechery,
   not FT / NYT. 500 is default; 600 reserved for one hero-of-hero per page.
   Italic phrase in --accent is the typographic signature. */
h1, .h-display-xl { font: 500 var(--t-display-xl)/var(--lh-tight) var(--serif); letter-spacing: var(--tr-tight); color: var(--ink-900); }
h2, .h-display-l  { font: 500 var(--t-display-l)/var(--lh-tight) var(--serif);  letter-spacing: var(--tr-tight); color: var(--ink-900); }
h3, .h-display-m  { font: 500 var(--t-display-m)/var(--lh-snug)  var(--serif);  letter-spacing: var(--tr-tight); color: var(--ink-900); }
h4, .h-display-s  { font: 500 var(--t-display-s)/var(--lh-snug)  var(--serif);  color: var(--ink-900); }
h5, .h1           { font: 600 var(--t-h1)/var(--lh-snug)         var(--sans);   color: var(--ink-900); }
h6, .h2           { font: 600 var(--t-h2)/var(--lh-base)         var(--sans);   color: var(--ink-900); }

.accent-phrase { font-style: italic; font-weight: 500; color: var(--accent); }

p, .body          { font: 400 var(--t-body)/var(--lh-base)  var(--sans); color: var(--fg-body); }
.body-l           { font: 400 var(--t-body-l)/var(--lh-read) var(--serif); color: var(--ink-800); }
.body-s           { font: 400 var(--t-body-s)/var(--lh-base) var(--sans); color: var(--fg-body); }
.meta             { font: 500 var(--t-meta)/var(--lh-base)  var(--sans); color: var(--fg-meta); letter-spacing: var(--tr-wide); }

.eyebrow          { font: 600 var(--t-micro)/1 var(--sans); text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--fg-meta); }
.action-code      { font: 600 var(--t-meta)/1 var(--mono); text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--ink-900); }
.ticker           { font: 600 var(--t-body)/1 var(--mono); letter-spacing: 0.02em; color: var(--ink-900); }
.ticker-l         { font: 700 var(--t-display-s)/1 var(--mono); letter-spacing: 0.02em; color: var(--ink-900); }
.size             { font: 500 var(--t-meta)/1 var(--mono); color: var(--ink-700); font-variant-numeric: tabular-nums; }
.timestamp        { font: 400 var(--t-meta)/1 var(--mono); color: var(--fg-faint); font-variant-numeric: tabular-nums; }

code, .code, pre  { font: 500 var(--t-body-s)/var(--lh-base) var(--mono); color: var(--ink-800); }

a {
  color: var(--ink-900);
  text-decoration: underline;
  text-decoration-color: var(--cream-400);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
a:hover { color: var(--accent); text-decoration-color: var(--accent); }

hr { border: 0; border-top: var(--hairline); margin: var(--s-7) 0; }

::selection { background: var(--cream-300); color: var(--ink-900); }