/* ============================================================
   FIGHT CLUB TLV — COLOR TOKENS
   ------------------------------------------------------------
   A dark-room palette: deep blacks, layered charcoals, and a
   single aggressive fight-red. Color is rationed — red is for
   action and heat only, never decoration.
   ============================================================ */

:root {
  /* ---- Ink / neutrals (the room is dark) ---- */
  --black:          #0A0A0B;  /* page floor */
  --charcoal-950:   #0F0F11;
  --charcoal-900:   #141417;  /* sunken / wells */
  --charcoal-850:   #18181B;  /* default surface */
  --charcoal-800:   #1D1D21;  /* card */
  --charcoal-700:   #26262B;  /* elevated / hover */
  --charcoal-600:   #34343B;  /* raised lines, chips */
  --charcoal-500:   #46464E;  /* hairlines on dark */
  --steel-400:      #5E5E68;  /* disabled ink */
  --steel-300:      #82828D;  /* muted ink */
  --steel-200:      #A8A8B2;  /* secondary ink */
  --fog-100:        #D4D4D8;  /* near-white body on dark */
  --white:          #F6F6F4;  /* primary ink on dark */
  --bone:           #E9E2D6;  /* warm premium off-white (championship) */

  /* ---- Fight red (heat / action) ---- */
  --red-700:        #8F0A12;  /* deepest blood, pressed */
  --red-600:        #B00D18;  /* press / deep */
  --red-500:        #E01A22;  /* PRIMARY ACCENT */
  --red-400:        #FF3A33;  /* hover / glow */
  --red-300:        #FF6A60;  /* tint on dark */
  --red-tint:       rgba(224, 26, 34, 0.14); /* wash behind heat */
  --red-glow:       rgba(224, 26, 34, 0.45);

  /* ---- Functional ---- */
  --green-500:      #2EB872;  /* available / open mat */
  --green-tint:     rgba(46, 184, 114, 0.16);
  --amber-500:      #E8A33D;  /* almost full / waitlist */
  --amber-tint:     rgba(232, 163, 61, 0.16);
  --info-500:       #3B8EF0;

  /* ---- Alpha utilities (over dark) ---- */
  --white-04:       rgba(246, 246, 244, 0.04);
  --white-06:       rgba(246, 246, 244, 0.06);
  --white-08:       rgba(246, 246, 244, 0.08);
  --white-12:       rgba(246, 246, 244, 0.12);
  --white-16:       rgba(246, 246, 244, 0.16);
  --black-40:       rgba(10, 10, 11, 0.40);
  --black-70:       rgba(10, 10, 11, 0.70);

  /* ============================================================
     SEMANTIC ALIASES — reference these in components, not raw scale
     ============================================================ */

  /* Surfaces */
  --bg-page:        var(--black);
  --bg-sunken:      var(--charcoal-900);
  --surface:        var(--charcoal-850);
  --surface-card:   var(--charcoal-800);
  --surface-raised: var(--charcoal-700);
  --surface-chip:   var(--charcoal-600);

  /* Ink */
  --text-primary:   var(--white);
  --text-secondary: var(--steel-200);
  --text-muted:     var(--steel-300);
  --text-disabled:  var(--steel-400);
  --text-on-accent: var(--white);
  --text-kicker:    var(--red-400);   /* eyebrow labels */

  /* Accent */
  --accent:         var(--red-500);
  --accent-hover:   var(--red-400);
  --accent-press:   var(--red-600);
  --accent-tint:    var(--red-tint);
  --accent-ink:     var(--red-300);   /* red text on dark */

  /* Lines */
  --border-subtle:  var(--white-08);
  --border-default: var(--white-12);
  --border-strong:  var(--white-16);
  --border-accent:  var(--red-500);

  /* States */
  --focus-ring:     var(--red-400);
  --success:        var(--green-500);
  --warning:        var(--amber-500);
  --danger:         var(--red-500);
}