/* ==========================================================================
   FestEngine — Color tokens  (DARK THEME — the brand's primary surface)
   "Festival at night": deep cool slates, an electric-teal control accent,
   a warm coral that stands in for the crowd-facing app (Front of House).
   ========================================================================== */

:root {
  /* ---- Base neutrals — cool slate, lifts toward blue in shadow --------- */
  --ink-1000: #07090C;   /* pure backdrop / behind imagery            */
  --ink-900:  #0B0E13;   /* page background                           */
  --ink-850:  #10141A;   /* app background                            */
  --ink-800:  #161B22;   /* base surface                              */
  --ink-750:  #1B2129;   /* card / raised surface                     */
  --ink-700:  #222A34;   /* hover surface / input                     */
  --ink-650:  #2B3440;   /* active surface                            */
  --ink-600:  #36414F;   /* strong border                            */
  --ink-500:  #46525F;   /* divider on dark glass                     */

  /* Hairlines drawn with alpha so they sit on imagery + glass alike */
  --line-soft:   rgba(244, 246, 247, 0.06);
  --line:        rgba(244, 246, 247, 0.10);
  --line-strong: rgba(244, 246, 247, 0.16);

  /* ---- Text ------------------------------------------------------------ */
  --text-100: #F4F6F7;   /* primary — headings, key copy              */
  --text-300: #C4CCD4;   /* body on dark                              */
  --text-500: #8A95A1;   /* secondary / captions                     */
  --text-700: #6F7B89;   /* muted / placeholder / disabled — 4.6:1 on ink-900 (AA) */
  --text-on-accent: #06231F; /* dark ink that sits on teal fills      */
  --text-on-warm:   #2A0F06; /* dark ink that sits on coral fills     */

  /* ---- Brand accent — Electric Teal (Backstage / control) ------------- */
  --teal-300: #7DEEDD;
  --teal-400: #5EE6D3;   /* hover / glow                              */
  --teal-500: #2DD4BF;   /* PRIMARY accent                            */
  --teal-600: #1FB3A0;   /* pressed                                   */
  --teal-700: #168A7C;   /* deep                                      */
  --teal-tint-12: rgba(45, 212, 191, 0.12);
  --teal-tint-20: rgba(45, 212, 191, 0.20);
  --teal-tint-40: rgba(45, 212, 191, 0.40);

  /* ---- Warm accent — Coral (Front of House / the crowd-facing app) ----- */
  --coral-300: #FFB59E;
  --coral-400: #FF9374;
  --coral-500: #FF7A59;   /* warm secondary                           */
  --coral-600: #ED5C3A;   /* pressed                                  */
  --coral-tint-12: rgba(255, 122, 89, 0.12);
  --coral-tint-20: rgba(255, 122, 89, 0.20);

  /* ---- Festival highlight — Amber (stage lights, sparingly) ----------- */
  --amber-400: #FFC24B;
  --amber-500: #FFB020;

  /* ---- Semantic -------------------------------------------------------- */
  --success-500: #3FCF8E;  --success-tint: rgba(63, 207, 142, 0.14);
  --warning-500: #FFB020;  --warning-tint: rgba(255, 176, 32, 0.14);
  --danger-500:  #FF5C5C;  --danger-tint:  rgba(255, 92, 92, 0.14);
  --info-500:    #4AA8FF;  --info-tint:    rgba(74, 168, 255, 0.14);

  /* ======================================================================
     SEMANTIC ALIASES — author UI against these, not the raw scales above
     ====================================================================== */
  --bg-page:        var(--ink-900);
  --bg-app:         var(--ink-850);
  --surface:        var(--ink-800);
  --surface-card:   var(--ink-750);
  --surface-raised: var(--ink-700);
  --surface-hover:  var(--ink-700);
  --surface-active: var(--ink-650);

  /* Translucent "glass" surfaces that float over the festival imagery */
  --glass:        rgba(18, 23, 30, 0.66);
  --glass-strong: rgba(13, 17, 22, 0.82);
  --glass-light:  rgba(244, 246, 247, 0.05);

  --border:        var(--line);
  --border-strong: var(--line-strong);
  --border-card:   var(--line-soft);

  --text-primary:   var(--text-100);
  --text-body:      var(--text-300);
  --text-secondary: var(--text-500);
  --text-muted:     var(--text-700);

  --accent:         var(--teal-500);
  --accent-hover:   var(--teal-400);
  --accent-press:   var(--teal-600);
  --accent-tint:    var(--teal-tint-12);
  --accent-glow:    var(--teal-tint-40);

  --accent-warm:      var(--coral-500);
  --accent-warm-hover:var(--coral-400);
  --accent-warm-tint: var(--coral-tint-12);

  --focus-ring: var(--teal-tint-40);
}