/* ============================================================
   EUROSTAR MEDIA NETWORK — Foundations
   Colors + Typography tokens (base + semantic)
   ------------------------------------------------------------
   Brand palette (client-supplied):
     Gold          #D4AF37
     Charcoal      #2A2C31
     Dark Gray     #3E3E45
     Off-White     #F5F5F7
     Med-Lt Gray   #A4A7AD
   Tone: exclusive clientele, regional reach, modern & progressive.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --gold:            #D4AF37;   /* primary accent — use sparingly, it's the spotlight */
  --charcoal:        #2A2C31;   /* primary dark / near-black ground */
  --dark-gray:       #3E3E45;   /* raised dark surface */
  --off-white:       #F5F5F7;   /* light ground */
  --med-gray:        #A4A7AD;   /* muted text, hairlines on dark */

  /* ---------- GOLD SCALE ---------- */
  --gold-50:   #FBF6E6;
  --gold-100:  #F4E9C2;
  --gold-200:  #EAD592;
  --gold-300:  #DFC162;
  --gold-400:  #D4AF37;   /* = --gold */
  --gold-500:  #BE9A28;
  --gold-600:  #9C7E1F;
  --gold-700:  #756017;
  --gold-800:  #4E4010;
  --gold-soft: rgba(212,175,55,0.14); /* tint wash / hover film */

  /* ---------- NEUTRAL SCALE (cool charcoal family) ---------- */
  --ink-1000:  #1B1C20;   /* deepest — full-bleed hero grounds */
  --ink-900:   #2A2C31;   /* = charcoal */
  --ink-800:   #34363C;
  --ink-700:   #3E3E45;   /* = dark-gray, raised surface */
  --ink-600:   #55565E;
  --ink-500:   #74757D;
  --ink-400:   #A4A7AD;   /* = med-gray */
  --ink-300:   #C7C9CE;
  --ink-200:   #E2E3E7;
  --ink-100:   #EDEEF1;
  --ink-50:    #F5F5F7;   /* = off-white */
  --white:     #FFFFFF;

  /* ---------- SEMANTIC: LIGHT MODE (default) ---------- */
  --bg:            var(--off-white);
  --bg-raised:     var(--white);
  --bg-sunken:     #ECEDEF;
  --fg1:           var(--charcoal);   /* primary text */
  --fg2:           var(--ink-600);    /* secondary text */
  --fg3:           var(--ink-500);    /* tertiary / captions */
  --fg-muted:      var(--ink-400);
  --accent:        var(--gold);
  --accent-ink:    var(--gold-700);   /* gold text on light bg (passes contrast) */
  --accent-contrast: var(--charcoal); /* text on a gold fill */
  --hairline:      var(--ink-200);
  --hairline-strong: var(--ink-300);

  /* status (kept muted/editorial, not candy) */
  --positive:  #3F7A55;
  --critical:  #A6402F;
  --live:      #C5402F;   /* "LIVE" broadcast dot */

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif; /* broadcast headlines, all-caps marks */
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, sans-serif; /* UI + body */
  --font-serif:   'Newsreader', Georgia, 'Times New Roman', serif;  /* editorial accents, pull quotes */
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', monospace; /* timecodes, metadata labels */

  /* ---------- TYPE SCALE (fluid-ish, px) ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  84px;
  --text-6xl:  112px;

  --leading-tight: 1.04;
  --leading-snug:  1.18;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --tracking-mega:  -0.03em;  /* huge display */
  --tracking-tight: -0.01em;
  --tracking-normal:0em;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.16em;   /* the EUROSTAR all-caps spacing signature */
  --tracking-label: 0.22em;   /* eyebrow / kicker labels */

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

  /* ---------- SPACING (8pt base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---------- ELEVATION ---------- */
  --shadow-sm:  0 1px 2px rgba(27,28,32,0.06), 0 1px 1px rgba(27,28,32,0.04);
  --shadow-md:  0 4px 14px rgba(27,28,32,0.08), 0 1px 3px rgba(27,28,32,0.06);
  --shadow-lg:  0 18px 48px rgba(27,28,32,0.16), 0 4px 12px rgba(27,28,32,0.08);
  --shadow-gold: 0 8px 30px rgba(212,175,55,0.28);
  --ring-gold:  0 0 0 2px var(--bg), 0 0 0 4px var(--gold);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);   /* default — confident settle */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  140ms;
  --dur-base:  240ms;
  --dur-slow:  420ms;
}

/* ============================================================
   DARK GROUND  — the brand's native habitat (cinema/broadcast)
   Apply to a container: <div class="es-dark"> or [data-theme="dark"]
   ============================================================ */
.es-dark, [data-theme="dark"] {
  --bg:          var(--ink-1000);
  --bg-raised:   var(--ink-900);
  --bg-sunken:   #141519;
  --fg1:         var(--off-white);
  --fg2:         var(--ink-300);
  --fg3:         var(--ink-400);
  --fg-muted:    var(--ink-500);
  --accent-ink:  var(--gold-300);
  --hairline:    rgba(255,255,255,0.10);
  --hairline-strong: rgba(255,255,255,0.18);
  --shadow-lg:   0 24px 60px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.4);
  --shadow-md:   0 6px 20px rgba(0,0,0,0.4);
}

/* ============================================================
   SEMANTIC TYPE PRIMITIVES
   ============================================================ */
.es-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.es-kicker {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg2);
}
.es-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--fg1);
}
.es-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.es-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.es-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.es-lede {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg2);
}
.es-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg1);
}
.es-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg2);
}
.es-caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--fg3);
}
.es-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg1);
}