/* ============================================================
   POUNCE — Colour tokens
   Source of truth: 25POU Brand Guidelines V1 + production site
   (tailwind.config.ts / globals.css on figma-design-pounce@design-polish).
   Vibrant, dynamic, bold. Black-first. Accents are FILLS — never
   body text on dark (contrast too low).
   ============================================================ */

:root {
  /* ── Primary (brand core) ─────────────────────────────── */
  --pounce-black:      #000000;  /* Primary Black  */
  --pounce-white:      #FFFFFF;  /* Primary White  */
  --pounce-cool-grey:  #C8D2D7;  /* Primary Cool Grey */

  /* ── Secondary accents ("the hype crew, not the headliners") ── */
  --pounce-navy:       #004664;
  --pounce-crimson:    #AF0023;
  --pounce-teal:       #5AC8B4;
  --pounce-tangerine:  #FF7832;

  /* ── Surface greys (from the production site) ─────────── */
  --pounce-bg:         #000000;  /* page background */
  --pounce-bg-mid:     #0A0A0A;  /* raised black */
  --pounce-paper:      #F4F3F0;  /* off-white light surface */
  --pounce-paper-alt:  #FAFAFA;  /* brightest light surface */

  /* ── Neutral text ramp (on dark) ──────────────────────── */
  --pounce-mute:       #B3B3B3;  /* secondary text */
  --pounce-dim:        #696969;  /* tertiary / de-emphasised */

  /* ── Plasma gradient stops (signature red→orange glow) ── */
  --plasma-ember:      #5A0000;
  --plasma-red:        #C20000;
  --plasma-flame:      #FF3D00;
  --plasma-orange:     #FF6A00;
  --plasma-glow:       #FFB347;

  /* ============================================================
     SEMANTIC ALIASES — reach for these in product code
     ============================================================ */
  --bg:                 var(--pounce-black);
  --bg-raised:          var(--pounce-bg-mid);
  --surface-light:      var(--pounce-paper);
  --surface-light-alt:  var(--pounce-paper-alt);

  --text-primary:       var(--pounce-white);
  --text-secondary:     var(--pounce-mute);
  --text-tertiary:      var(--pounce-dim);
  --text-on-light:      var(--pounce-black);

  --accent:             var(--pounce-tangerine); /* focus / selection / highlight */
  --accent-hover:       var(--plasma-orange);

  --border-hairline:    rgba(255, 255, 255, 0.12);
  --border-strong:      rgba(255, 255, 255, 0.24);
  --border-on-light:    rgba(0, 0, 0, 0.10);

  --field-bg:           rgba(255, 255, 255, 0.20);
  --field-border:       rgba(255, 255, 255, 0.10);
  --field-border-focus: rgba(255, 255, 255, 0.40);
}