:root{
  /* Color — var(--e-global-color-<id>) seeded in Task 5; fallback = handoff value */
  --ink:        var(--e-global-color-unbias_ink, #22303D);
  --ink-deep:   var(--e-global-color-unbias_ink_deep, #1A2630);
  --ink-700:    var(--e-global-color-unbias_ink_700, #2C3E4A);
  --teal:       var(--e-global-color-unbias_teal, #159B9C);
  --teal-bright:var(--e-global-color-unbias_teal_bright, #17B3B5);
  --teal-text:  var(--e-global-color-unbias_teal_text, #0E7A7B);
  --teal-tint:  var(--e-global-color-unbias_teal_tint, #EAF7F7);
  --surface:    var(--e-global-color-unbias_surface, #FFFFFF);
  --surface-alt:var(--e-global-color-unbias_surface_alt, #F4F8F8);
  --border:     var(--e-global-color-unbias_border, #E2EBEC);
  --text-muted: var(--e-global-color-unbias_text_muted, #6A7A85);
  --text-subtle:var(--e-global-color-unbias_text_subtle, #93A2AB);
  --neg:        var(--e-global-color-unbias_neg, #D8624F);
  --pos:        var(--e-global-color-unbias_pos, #1F9D6B);
  --star:       var(--e-global-color-unbias_star, #F5A623);

  /* Type */
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-ui:      "Hanken Grotesk", sans-serif;
  --font-serif:   "Newsreader", serif;
  --post-title-font: var(--font-serif);

  /* Spacing scale (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Radius */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  /* Shadow */
  --sh-sm: 0 1px 2px rgba(26,38,48,.06);
  --sh-md: 0 6px 18px rgba(26,38,48,.08);
  --sh-lg: 0 14px 36px rgba(26,38,48,.12);
  --sh-cta:0 8px 24px rgba(21,155,156,.28);

  /* Layout */
  --maxw:1200px; --gutter:24px;
}
@media (max-width:768px){ :root{ --gutter:16px; } }