/* ============================================================
   Flagler Voice — Design Tokens
   Cinematic broadcast-dark. Brand colours are lifted from the
   studio's own logo: the "VOICE" cyan-blue, the "FLAGLER" violet
   and the chrome mic's magenta highlight — not the gold frame
   the old site's slider template happened to sit inside.
   Dark-only by design (OLED broadcast aesthetic); every pair
   below is checked against WCAG 2.1 AA on --bg / --surface.
   ============================================================ */
:root{
  /* ---- Surfaces (low-emission near-black, never pure #000) ---- */
  --bg:#07080B;          /* page */
  --surface:#0E1016;     /* cards, panels */
  --surface-2:#151822;   /* raised / hover fill */
  --surface-3:#1D2130;   /* inputs, wells */
  --scrim:rgba(4,5,8,.78);

  /* ---- Text ---- */
  --fg:#F2F5FA;          /* primary — 17.4:1 on --bg */
  --fg-soft:#B8C1D1;     /* secondary — 9.3:1 on --bg */
  --muted:#8A93A6;       /* tertiary / captions — 5.4:1 on --bg, 4.9:1 on --surface */
  --on-brand:#04070C;    /* text sitting on a filled brand button */

  /* ---- Brand: VOICE blue ---- */
  --volt:#37B4F0;        /* primary action — 8.0:1 on --bg */
  --volt-bright:#6BCBF7; /* hover / focus */
  --volt-deep:#1B7FB4;   /* pressed, borders */
  --volt-wash:rgba(55,180,240,.12);

  /* ---- Accent: FLAGLER violet / mic magenta ---- */
  --lilac:#B47BE8;       /* 7.2:1 on --bg */
  --magenta:#D45CF0;
  --lilac-wash:rgba(180,123,232,.13);

  /* ---- Signal: ON AIR ---- */
  --live:#FF4D4A;        /* 5.6:1 on --bg — always paired with a text label */
  --live-wash:rgba(255,77,74,.14);

  /* ---- Feedback ---- */
  --good:#41C98B;        /* 8.9:1 on --bg */
  --warn:#F0B440;
  --bad:#FF6B63;

  /* ---- Lines ---- */
  --line:#20242F;        /* hairline */
  --line-strong:#2E3444; /* card edge, dividers that must read */
  --line-focus:var(--volt-bright);

  /* ---- Type ---- */
  --display:"Archivo", "Helvetica Neue", Arial, sans-serif; /* wide/heavy variable grotesque */
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* rail + meta labels */

  /* fluid type scale */
  --t-mega:clamp(3.2rem, 11vw, 9rem);      /* hero name plate */
  --t-display:clamp(2.5rem, 6vw, 4.75rem); /* section openers */
  --t-h1:clamp(2.1rem, 4.2vw, 3.25rem);
  --t-h2:clamp(1.55rem, 2.6vw, 2.1rem);
  --t-h3:1.3rem;
  --t-body:1.0625rem;   /* 17px */
  --t-small:0.9375rem;  /* 15px */
  --t-label:0.6875rem;  /* 11px mono, always uppercase + tracked */

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

  /* ---- Radius ---- */
  --r-sm:4px; --r-md:8px; --r-lg:14px; --r-pill:999px;

  /* ---- Elevation (dark UI reads elevation as light, not shadow) ---- */
  --sh-1:0 1px 2px rgba(0,0,0,.6);
  --sh-2:0 8px 26px rgba(0,0,0,.55);
  --sh-3:0 24px 70px rgba(0,0,0,.65);
  --glow-volt:0 0 0 1px rgba(55,180,240,.35), 0 12px 40px rgba(55,180,240,.14);

  /* ---- Motion ---- */
  --dur-fast:140ms; --dur:220ms; --dur-slow:380ms;
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --ease-in:cubic-bezier(.55,.06,.68,.19);

  /* ---- Layout ---- */
  --wrap:1240px;
  --wrap-narrow:820px;
  --rail:44px;           /* width of the vertical side rails */
  --nav-h:72px;

  /* ---- z-index scale ---- */
  --z-base:0; --z-rail:10; --z-nav:40; --z-sheet:100; --z-toast:1000;
}

/* The site is intentionally dark-only. If a viewer forces a light
   preference we keep the dark palette (a half-inverted broadcast
   aesthetic reads as broken) but lift contrast slightly rather than
   pretending to be a light theme. */
@media (prefers-contrast: more){
  :root{
    --fg-soft:#D6DCE7;
    --muted:#A6AFC0;
    --line:#2C3140;
    --line-strong:#3E4557;
  }
}