/* =====================================================================
   THINKERS DILEMMA — foundational tokens
   Color, type, scale, motion. Import once at the root.
   ===================================================================== */

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

:root {
  /* ------- INK (foreground) ----------------------------------------- */
  --ink:        #14110E;   /* primary type; warm near-black, never pure */
  --ink-2:      #3A342C;   /* secondary type, captions */
  --ink-3:      #6B6258;   /* tertiary type, metadata */
  --ink-4:      #A39988;   /* hint, disabled */

  /* ------- PAPER (background) --------------------------------------- */
  --paper:      #F2EBDD;   /* primary surface — warm cream */
  --paper-hi:   #F8F4EA;   /* lifted surface, cards */
  --paper-lo:   #E8DFC9;   /* recessed, hairlines, footers */
  --paper-deep: #DCD1B6;   /* deepest paper, dividers */

  /* ------- SIGNAL (the accent — vermilion) -------------------------- */
  --signal:        #D9351F;   /* the brand red — for marks, accents, hits */
  --signal-deep:   #9F2614;   /* hover/pressed/serious moments */
  --signal-tint:   #F6D9D2;   /* signal background wash */
  --signal-quiet:  #B23725;   /* on cream when full signal is too loud */

  /* ------- INK-BLUE (charts / data only) ---------------------------- */
  --blue-ink:   #1B3A6B;
  --blue-tint:  #D6DDE9;

  /* ------- RULE & LINE --------------------------------------------- */
  --rule:       #C9BD9F;   /* hairline rules on paper */
  --rule-soft:  #DDD2B6;
  --rule-hard:  #14110E;   /* heavy ink rule */

  /* ------- TYPE FACES ---------------------------------------------- */
  --serif:      'Newsreader', 'Source Serif Pro', Georgia, serif;
  --sans:       'IBM Plex Sans', 'Inter', system-ui, sans-serif;
  --mono:       'IBM Plex Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ------- SEMANTIC TEXT TOKENS ------------------------------------- */
  /* DISPLAY — serif, italic optical-size, editorial weight */
  --display-1:    400 clamp(56px, 8vw, 112px) / 0.95 var(--serif);
  --display-2:    400 clamp(40px, 5.5vw, 72px) / 1.02 var(--serif);

  /* HEADLINES */
  --h1:           500 48px / 1.05 var(--serif);
  --h2:           500 32px / 1.15 var(--serif);
  --h3:           600 22px / 1.25 var(--sans);
  --h4:           600 17px / 1.3 var(--sans);

  /* BODY */
  --body-lg:      400 19px / 1.55 var(--serif);
  --body:         400 16px / 1.6 var(--sans);
  --body-sm:      400 14px / 1.5 var(--sans);

  /* SUPPORTING */
  --label:        500 12px / 1.2 var(--mono);
  --kicker:       500 11px / 1.4 var(--mono);  /* tracked all-caps */
  --caption:      400 13px / 1.4 var(--mono);
  --numeral:      500 14px / 1 var(--mono);

  /* ------- SCALE & RHYTHM ------------------------------------------ */
  --s-0:  4px;   --s-1:  8px;   --s-2: 12px;  --s-3: 16px;
  --s-4: 24px;   --s-5: 32px;   --s-6: 48px;  --s-7: 64px;
  --s-8: 96px;   --s-9: 128px;

  --col-gap:     24px;
  --grid-max:    1240px;

  /* ------- RADII (small, restrained) ------------------------------- */
  --r-0:  0;
  --r-1:  2px;
  --r-2:  4px;
  --r-pill: 999px;

  /* ------- BORDERS -------------------------------------------------- */
  --border-hair:  1px solid var(--rule);
  --border-rule:  1px solid var(--ink);
  --border-heavy: 2px solid var(--ink);

  /* ------- SHADOWS (subtle, ink-tinted; this is paper, not glass) -- */
  --shadow-1: 0 1px 0 rgba(20,17,14,0.06);
  --shadow-2: 0 2px 0 rgba(20,17,14,0.08), 0 6px 16px -8px rgba(20,17,14,0.18);
  --shadow-3: 0 4px 0 rgba(20,17,14,0.08), 0 18px 40px -16px rgba(20,17,14,0.25);

  /* ------- MOTION (analog: nothing bouncy) ------------------------- */
  --ease:       cubic-bezier(.2,.6,.2,1);
  --ease-out:   cubic-bezier(.16,.84,.32,1);
  --t-fast:     120ms;
  --t-base:     200ms;
  --t-slow:     320ms;
}

/* =====================================================================
   GLOBAL RESET / DEFAULTS
   ===================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: var(--body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* The kicker — tracked, all-caps, monospaced label.
   Used above headlines, as section tags, etc. */
.kicker {
  font: var(--kicker);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
}

/* The numeral — used for issue numbers, episode numbers, dates */
.numeral {
  font: var(--numeral);
  font-feature-settings: "tnum", "lnum";
  letter-spacing: 0.04em;
}

/* Editorial italic emphasis — Newsreader italic is the brand voice */
.editorial { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* =====================================================================
   PAPER TEXTURE — subtle, never decorative
   Apply to surfaces with `.paper-grain`
   ===================================================================== */
.paper-grain {
  position: relative;
}
.paper-grain::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 23% 19%, rgba(20,17,14,0.025) 0 1px, transparent 1.5px),
    radial-gradient(circle at 71% 63%, rgba(20,17,14,0.022) 0 1px, transparent 1.5px),
    radial-gradient(circle at 47% 88%, rgba(20,17,14,0.02) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 32%, rgba(20,17,14,0.025) 0 1px, transparent 1.5px);
  background-size: 13px 13px, 19px 19px, 23px 23px, 17px 17px;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.9;
}