/* ============================================================
   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(0.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);
}