/* ==========================================================================
   Morcegão FM — Color tokens
   Late-night web rock & blues radio. Warm blacks, amp-glow amber,
   blood red, and a nod-to-the-blues electric blue. Bone-white "paper" text.
   ========================================================================== */
:root {
  /* --- Base neutrals (warm, vintage — never pure #000/#fff) --- */
  --bat-black:      #0C0A09; /* warm near-black — primary background            */
  --bat-coal:       #141110; /* raised background / page gutter                 */
  --bat-ash:        #1C1917; /* card / surface                                  */
  --bat-smoke:      #2A2522; /* elevated surface, inputs                        */
  --bat-iron:       #3B3430; /* borders, dividers                               */
  --bat-slate:      #574E48; /* strong border / disabled fill                   */
  --bat-dust:       #8A7F76; /* muted text, captions                            */
  --bat-fog:        #B8ADA2; /* secondary text                                  */
  --bat-bone:       #F5EFE3; /* primary text — warm paper white                 */
  --bat-paper:      #FBF7EE; /* brightest text / on-accent light                */

  /* --- Brand primary: Blood Red (the rock) — matched to the logo bat --- */
  --red-900: #4A0D0B;
  --red-700: #9A160F;
  --red-600: #C21A12;
  --red-500: #E4261D; /* PRIMARY brand red — sampled from the logo             */
  --red-400: #F0443A;
  --red-300: #F87A72;

  /* --- Amber: amp / tube glow (secondary warmth, "ON AIR") --- */
  --amber-700: #9A5B00;
  --amber-600: #C77800;
  --amber-500: #F2A007; /* SECONDARY brand amber                                */
  --amber-400: #FBBF3F;
  --amber-300: #FFD97A;

  /* --- Electric Blue: the blues (accent, links, cool contrast) --- */
  --blue-700: #114B7A;
  --blue-600: #1A6FB0;
  --blue-500: #2A9DF4; /* ACCENT — bluesy electric                             */
  --blue-400: #57B6FF;
  --blue-300: #9AD3FF;

  /* --- Support: live green (ON AIR pulse) --- */
  --live-500: #34C759;
  --live-400: #5AD97A;

  /* ======================================================================
     Semantic aliases — reach for THESE in components, not the raw ramps.
     ====================================================================== */
  /* Backgrounds & surfaces */
  --bg-page:        var(--bat-black);
  --bg-gutter:      var(--bat-coal);
  --surface-card:   var(--bat-ash);
  --surface-raised: var(--bat-smoke);
  --surface-sunken: var(--bat-coal);
  --surface-input:  var(--bat-smoke);

  /* Text */
  --text-strong:    var(--bat-paper);
  --text-body:      var(--bat-bone);
  --text-muted:     var(--bat-fog);
  --text-faint:     var(--bat-dust);
  --text-on-accent: var(--bat-paper);
  --text-on-amber:  var(--bat-black);

  /* Brand / interactive */
  --brand:          var(--red-500);
  --brand-hover:    var(--red-400);
  --brand-press:    var(--red-600);
  --brand-quiet:    var(--red-900);
  --accent:         var(--blue-500);
  --accent-hover:   var(--blue-400);
  --highlight:      var(--amber-500);
  --highlight-hover:var(--amber-400);

  /* Borders & lines */
  --border-hairline: var(--bat-iron);
  --border-strong:   var(--bat-slate);
  --border-brand:    var(--red-500);

  /* Status */
  --live:           var(--live-500);
  --danger:         var(--red-500);
  --warning:        var(--amber-500);
  --info:           var(--blue-500);

  /* Links */
  --link:           var(--blue-400);
  --link-hover:     var(--amber-400);
}