/* =========================================================
   STATIC — Editorial Design System
   Tokens: Colors + Type
   ========================================================= */

/* --- Webfont substitutes (see README for proprietary originals) --- */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;500;600;700&family=Newsreader:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  /* =========================================================
     COLOR TOKENS
     ========================================================= */

  /* Brand Hazards (signature accents — use sparingly) */
  --static-mint:           #3cffd0;   /* Jelly Mint — primary CTA fill, active borders, hazard tiles */
  --static-ultraviolet:    #5200ff;   /* Verge Ultraviolet — secondary hazard, promo, error */
  --static-mint-border:    #309875;   /* Console Mint Border — darker mint for outlines */
  --static-purple-rule:    #3d00bf;   /* Darker UV — StoryStream rail dividers */

  /* Surfaces */
  --bg-canvas:             #131313;   /* Canvas Black — default surface, ALWAYS */
  --bg-slate:              #2d2d2d;   /* Surface Slate — secondary cards, dark buttons */
  --bg-image-frame:        #313131;   /* 1px frame for inline imagery */
  --bg-white:              #ffffff;   /* Hazard White — feature spotlight tile fill */
  --bg-absolute-black:     #000000;   /* Pure black — text on mint/yellow/white tiles only */

  /* Accent tile fills (saturated story-tile palette) */
  --tile-yellow:           #ffd400;
  --tile-pink:             #ff6ec7;
  --tile-orange:           #ff5b1f;
  --tile-electric:         #2a5cff;
  --tile-mint:             #3cffd0;
  --tile-purple:           #5200ff;
  --tile-white:            #ffffff;

  /* Text */
  --fg-primary:            #ffffff;   /* Headlines & display on canvas */
  --fg-secondary:          #949494;   /* Bylines, timestamps, photo credits */
  --fg-muted:              #e9e9e9;   /* Slate button text — slightly off-white */
  --fg-inverted:           #131313;   /* On mint/yellow/white tiles */
  --fg-dim:                #8c8c8c;   /* Pressed state bg */

  /* Semantic Links */
  --link-rest:             #ffffff;
  --link-hover:            #3860be;   /* Deep Link Blue — universal hover, no underline */
  --focus-ring:            #1eaedb;   /* Keyboard focus only */

  /* Borders */
  --border-hairline:       #ffffff;
  --border-frame:          #313131;
  --border-mint:           #3cffd0;
  --border-ultraviolet:    #5200ff;

  /* Atmospheric */
  --ring-atmospheric:      rgba(0, 0, 0, 0.33);
  --overlay-translucent:   rgba(255, 255, 255, 0.20);  /* Hover invert */
  --overlay-pressed:       rgba(140, 140, 140, 0.87);  /* Active bg */

  /* =========================================================
     TYPOGRAPHY TOKENS
     ========================================================= */

  /* Families (substitutes via Google Fonts — see README) */
  --font-display:    'Archivo Black', 'Impact', 'Helvetica', sans-serif;        /* sub for Manuka */
  --font-sans:       'Space Grotesk', 'Helvetica', 'Arial', sans-serif;         /* sub for PolySans */
  --font-mono:       'Space Mono', 'Courier New', 'Courier', monospace;         /* sub for PolySans Mono */
  --font-serif:      'Newsreader', 'Georgia', serif;                            /* sub for FK Roman Standard */
  --font-utility:    'Space Grotesk', -apple-system, system-ui, sans-serif;     /* utility/Roboto-ish */

  /* Display sizes (Manuka territory) */
  --type-display-xl:   6.69rem;   /* 107px — hero wordmark */
  --type-display-l:    5.63rem;   /* 90px */
  --type-display-m:    3.75rem;   /* 60px — minimum Manuka size */

  /* Headlines */
  --type-h1:           2.13rem;   /* 34px */
  --type-h-wide:       2.00rem;   /* 32px sub-hero */
  --type-h2:           1.50rem;   /* 24px tile head */
  --type-h3:           1.25rem;   /* 20px compact head */
  --type-whisper:      1.19rem;   /* 19px thin capitalized eyebrow */

  /* Labels & body */
  --type-label-xl:     1.13rem;   /* 18px UPPERCASE kicker */
  --type-body:         1.00rem;   /* 16px */
  --type-inline:       0.94rem;   /* 15px UI label */
  --type-compact:      0.81rem;   /* 13px */
  --type-eyebrow:      0.75rem;   /* 12px */
  --type-caption:      0.69rem;   /* 11px */
  --type-meta:         0.63rem;   /* 10px nano */

  /* Line heights */
  --lh-tight-display: 0.95;       /* boosted +0.15 for Archivo Black substitution */
  --lh-snap:          1.00;
  --lh-label:         1.20;
  --lh-eyebrow:       1.30;
  --lh-body:          1.60;
  --lh-button-mono:   2.00;

  /* Letter-spacing registers */
  --ls-mono-tight:    1.1px;
  --ls-mono-button:   1.5px;
  --ls-caps-loose:    1.8px;
  --ls-whisper:       1.9px;
  --ls-display:       1.07px;
  --ls-wide-head:     0.32px;
  --ls-serif:         -0.16px;
  --ls-tag:           0.72px;

  /* =========================================================
     SPACING SYSTEM (base 8, with micro values for tight clusters)
     ========================================================= */
  --space-1:    1px;
  --space-2:    2px;
  --space-4:    4px;
  --space-5:    5px;
  --space-6:    6px;
  --space-8:    8px;
  --space-10:  10px;
  --space-12:  12px;
  --space-14:  14px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-64:  64px;

  /* =========================================================
     RADIUS SCALE (eight discrete values — every component announces hierarchy via corners)
     ========================================================= */
  --r-input:   2px;     /* typewriter tag */
  --r-image:   3px;     /* inline image */
  --r-nested:  4px;     /* nested card image, small button */
  --r-card:    20px;    /* standard pill card / color-block tile */
  --r-feature: 24px;    /* feature tile, primary button */
  --r-promo:   30px;    /* large promotional button */
  --r-pill:    40px;    /* outlined CTA pill — loudest pill */
  --r-circle:  50%;

  /* =========================================================
     ELEVATION (color-as-elevation; 1px borders, no shadows)
     ========================================================= */
  --elev-hairline-white:  inset 0 0 0 1px var(--border-hairline);
  --elev-hairline-frame:  inset 0 0 0 1px var(--border-frame);
  --elev-hairline-mint:   inset 0 0 0 1px var(--border-mint);
  --elev-hairline-uv:     inset 0 0 0 1px var(--border-ultraviolet);
  --elev-atmospheric:     0 0 0 1px var(--ring-atmospheric);
  --elev-active-tab:      inset 0 -1px 0 0 var(--static-mint);

  /* Transitions */
  --t-fast:   120ms ease;
  --t-base:   150ms ease;
  --t-button: 180ms ease;
}

/* =========================================================
   BASE / SEMANTIC ELEMENT STYLES
   ========================================================= */

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

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--type-display-xl);
  line-height: var(--lh-tight-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-primary);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--type-display-l);
  line-height: var(--lh-tight-display);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--type-h1);
  line-height: var(--lh-snap);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--type-h2);
  line-height: var(--lh-snap);
  margin: 0;
}

p {
  font-size: var(--type-body);
  font-weight: 500;
  line-height: var(--lh-body);
  margin: 0 0 1em 0;
}

/* Signature: thin-weight capitalized whisper eyebrow */
.whisper {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--type-whisper);
  text-transform: uppercase;
  letter-spacing: var(--ls-whisper);
  line-height: var(--lh-label);
  color: var(--fg-primary);
}

/* UPPERCASE mono kicker / timestamp / tag */
.kicker {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--ls-mono-tight);
  line-height: var(--lh-label);
}

.tag {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-loose);
  padding: 4px 10px;
  border-radius: var(--r-card);
  display: inline-block;
}

.eyebrow-sans {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-loose);
  line-height: var(--lh-eyebrow);
}

code, .mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--ls-mono-tight);
}

a {
  color: var(--link-rest);
  text-decoration: none;
  transition: color var(--t-base);
}
a:hover { color: var(--link-hover); }

/* Serif print-voice exception */
.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: var(--ls-serif);
  line-height: 1.30;
}