/* ===========================================================================
   ENDPOINT · COLOR TOKENS
   Dark-first system on the official brand palette:
     PRIMARY  #007AFF  ·  SECONDARY (purple) #6F348D
     DENIM #1D232F  ·  SLATE #191D26  ·  NIGHT #0E1219
   Signal red is a functional (non-brand) state colour for live/danger.
   Base palette = raw values. Semantic aliases map them to roles (dark default).
   =========================================================================== */

:root {
  /* --- Steel / ink neutrals (anchored on NIGHT / SLATE / DENIM) ----------- */
  --ep-ink-950: #0E1219;   /* NIGHT — deepest stage black */
  --ep-ink-900: #12161F;   /* app background */
  --ep-ink-850: #191D26;   /* SLATE — raised background */
  --ep-ink-800: #1D232F;   /* DENIM — card surface */
  --ep-ink-750: #242B39;   /* card hover */
  --ep-ink-700: #2D3543;   /* inset / hairline-strong */
  --ep-ink-600: #3A4453;   /* borders strong */
  --ep-ink-500: #4C5768;   /* disabled fill */
  --ep-ink-400: #697587;   /* faint text */
  --ep-ink-300: #8C97A8;   /* muted text */
  --ep-ink-200: #B4BCC8;   /* secondary text */
  --ep-ink-100: #D9DEE6;   /* primary text on dark (soft) */
  --ep-ink-50:  #EEF1F5;   /* near-white */
  --ep-white:   #FFFFFF;
  --ep-black:   #000000;

  /* --- Brand · Primary blue (#007AFF) ------------------------------------- */
  --ep-blue-800: #003D80;
  --ep-blue-700: #0057B3;
  --ep-blue-600: #006AE0;
  --ep-blue-500: #007AFF;  /* PRIMARY brand */
  --ep-blue-400: #3D97FF;
  --ep-blue-300: #7AB6FF;
  --ep-blue-200: #B5D7FF;
  --ep-blue-glow: rgba(0, 122, 255, 0.45);
  --ep-blue-tint: rgba(0, 122, 255, 0.14);

  /* --- Secondary · Purple (#6F348D) --------------------------------------- */
  --ep-purple-800: #3F1D52;
  --ep-purple-700: #54276C;
  --ep-purple-600: #6F348D;  /* SECONDARY brand (exact) */
  --ep-purple-500: #8A45AD;  /* accent fill — slightly brighter for UI use */
  --ep-purple-400: #A766C6;  /* accent text / highlights on dark */
  --ep-purple-300: #C698DC;
  --ep-purple-glow: rgba(138, 69, 173, 0.42);
  --ep-purple-tint: rgba(138, 69, 173, 0.16);

  /* --- Signal · Live / danger red (functional, non-brand) ----------------- */
  --ep-red-700: #A81E33;
  --ep-red-600: #D32F45;
  --ep-red-500: #F03A52;   /* LIVE / danger */
  --ep-red-400: #FF6377;
  --ep-red-tint: rgba(240, 58, 82, 0.14);

  /* --- Support semantics (functional) ------------------------------------- */
  --ep-green-600: #15A65C;
  --ep-green-500: #21C770;  /* success / win */
  --ep-green-tint: rgba(33, 199, 112, 0.14);
  --ep-amber-600: #D98A12;
  --ep-amber-500: #F5A524;  /* warning */
  --ep-amber-tint: rgba(245, 165, 36, 0.14);

  /* --- Victory gold (trophies, MVP, championships) ------------------------- */
  --ep-gold-500: #E8B339;
  --ep-gold-400: #F6CB5E;

  /* ========================================================================
     SEMANTIC ALIASES — default (dark) theme
     Reference these in components, NOT the raw scale.
     ======================================================================== */

  /* Backgrounds & surfaces */
  --bg-stage:        var(--ep-ink-950);
  --bg-base:         var(--ep-ink-900);
  --bg-raised:       var(--ep-ink-850);
  --surface-card:    var(--ep-ink-800);
  --surface-card-hover: var(--ep-ink-750);
  --surface-inset:   var(--ep-ink-700);
  --surface-overlay: rgba(14, 18, 25, 0.72);

  /* Text */
  --text-strong:  var(--ep-white);
  --text-default: var(--ep-ink-100);
  --text-muted:   var(--ep-ink-300);
  --text-faint:   var(--ep-ink-400);
  --text-on-brand: var(--ep-white);
  --text-on-accent: var(--ep-white);

  /* Borders & hairlines */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.11);
  --border-strong: var(--ep-ink-600);

  /* Brand roles */
  --brand:        var(--ep-blue-500);
  --brand-hover:  var(--ep-blue-400);
  --brand-active: var(--ep-blue-600);
  --on-brand:     var(--ep-white);
  --accent:       var(--ep-purple-500);
  --accent-text:  var(--ep-purple-400);
  --on-accent:    var(--ep-white);

  /* State / status */
  --live:    var(--ep-red-500);
  --success: var(--ep-green-500);
  --warning: var(--ep-amber-500);
  --danger:  var(--ep-red-500);
  --info:    var(--ep-blue-400);

  /* Focus */
  --focus-ring: var(--ep-blue-400);
  --focus-ring-offset: var(--ep-ink-900);
}

/* ===========================================================================
   LIGHT THEME — opt-in via .ep-light or [data-theme="light"].
   Steel-on-paper. Used for docs, print, light marketing surfaces.
   =========================================================================== */
.ep-light,
[data-theme="light"] {
  --bg-stage:        #DDE2EA;
  --bg-base:         #EEF1F5;
  --bg-raised:       #F6F8FB;
  --surface-card:    #FFFFFF;
  --surface-card-hover: #F4F6FA;
  --surface-inset:   #E9EDF3;
  --surface-overlay: rgba(14, 18, 25, 0.45);

  --text-strong:  #0E1219;
  --text-default: #1D232F;
  --text-muted:   #5A6678;
  --text-faint:   #8C97A8;
  --text-on-brand: #FFFFFF;
  --text-on-accent: #FFFFFF;

  --border-subtle: rgba(14, 18, 25, 0.08);
  --border-default: rgba(14, 18, 25, 0.14);
  --border-strong: rgba(14, 18, 25, 0.22);

  --brand:        var(--ep-blue-600);
  --brand-hover:  var(--ep-blue-500);
  --brand-active: var(--ep-blue-700);
  --accent:       var(--ep-purple-600);
  --accent-text:  var(--ep-purple-600);

  --focus-ring: var(--ep-blue-500);
  --focus-ring-offset: #FFFFFF;
}