/* ============================================================
   RadioGrub — tokens.css
   The identity, in one file: RED, BLACK, WHITE.

   WHY IT IS BUILT THIS WAY
   The palette used to be white-first with a red accent, and it read
   plain — a clean template rather than a station you want to be on.
   Red on white has nowhere to go: every surface is already at maximum
   brightness, so the brand colour cannot be louder than the page.

   Invert it and the red has somewhere to arrive. Near-black surfaces
   give depth you can stack; white type on them is crisper than black
   type on white ever is; and the red stops being decoration and starts
   being ENERGY, because it is the only saturated thing in the frame.

   It also suits the marks we already own. Measured off the real files:
   the RadioGrub logo is 89% light pixels with no dark ones at all — a
   white mark that was sitting on a red bar, fighting it. Red Cup's
   artwork is 59% red on transparency. Both were waiting for black.

   THE RULES OF THIS PALETTE
   · BLACK carries the page. Depth comes from stacked near-blacks, not
     from borders — --bg through --surface3, each a little lighter.
   · WHITE carries the words. Type is white or a white at reduced
     opacity; never grey-blue, never coloured.
   · RED is for energy and never for reading. Fills, edges, glows,
     the live dot, the thing you are meant to press. Red text on black
     sits near 4:1 and that is not a contrast ratio for sentences, so
     --accentText exists for the rare label that has to be red and
     small, and it is brighter for exactly that reason.
   · Nothing else gets a hue. One warm amber survives for "live", and
     it is the only exception in the file.
   ============================================================ */

:root{
  /* ---- BLACK: the page, in five layers of depth ---- */
  --bg:#0A0A0C;              /* the page itself */
  --bgDeep:#050506;          /* behind the page: hero letterboxing, scrims */
  --surface:#121216;         /* cards, the header */
  --surface2:#1A1A20;        /* raised: inputs, hovered cards, the drawer */
  --surface3:#24242C;        /* raised again: menus, chips, active states */
  --surfaceGlass:rgba(18,18,22,.72);   /* over imagery, with a blur behind it */

  /* ---- WHITE: the words and the space ---- */
  --text:#FFFFFF;
  --muted:rgba(255,255,255,.70);
  --muted2:rgba(255,255,255,.46);
  --muted3:rgba(255,255,255,.28);
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.06);
  --line3:rgba(255,255,255,.18);       /* a border meant to be seen */

  /* ---- RED: the energy ---- */
  --accent:#E21B23;                    /* the brand red, unchanged */
  --accent2:#B01218;                   /* pressed, and the bottom of a gradient */
  --accentHot:#FF3A43;                 /* the top of a gradient, and glows */
  --accentText:#FF6A70;                /* the ONLY red allowed on small text */
  --accentSoft:rgba(226,27,35,.14);    /* a tint you can put type on */
  --accentSoft2:rgba(226,27,35,.24);
  --accentLine:rgba(226,27,35,.38);
  --accentGlow:0 0 0 1px rgba(226,27,35,.45), 0 8px 30px rgba(226,27,35,.22);
  --accentGrad:linear-gradient(135deg, var(--accentHot), var(--accent) 55%, var(--accent2));

  /* ---- the one exception: LIVE ---- */
  --warm:#FFC61A;
  --warmSoft:rgba(255,198,26,.16);
  --warmLine:rgba(255,198,26,.34);

  --onAccent:#ffffff;

  /* ---- depth. On black, shadow alone is invisible, so every raised
          thing also carries a one-pixel light edge. ---- */
  --shadow:0 18px 48px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.05);
  --shadow2:0 10px 26px rgba(0,0,0,.50), 0 0 0 1px rgba(255,255,255,.04);
  --shadowLift:0 26px 64px rgba(0,0,0,.70), 0 0 0 1px rgba(255,255,255,.09);

  --r8:8px;
  --r12:12px;
  --r16:16px;
  --r20:20px;
  --r28:28px;
  --max:1180px;

  /* ---- MOTION. Restraint is the brief: one curve, three speeds, and
          nothing bounces. ---- */
  --ease:cubic-bezier(.4,0,.2,1);
  --easeOut:cubic-bezier(.16,1,.3,1);
  --t1:.14s;                 /* a press */
  --t2:.24s;                 /* a hover, a fade */
  --t3:.42s;                 /* something arriving */

  color-scheme: dark;
}

/* An operator who has asked their machine to stop moving things gets a
   still site: no carousel glide, no hover lift, no hero video. */
@media (prefers-reduced-motion: reduce){
  :root{ --t1:0s; --t2:0s; --t3:0s; }
}