/* ============================================================
   Out Of Bounds Entertainment — Brand Color Variables
   theme-colors.css

   This is the single source of truth for every color used
   across the public site and the admin panels. To change the
   palette, edit the values below — nothing else needs to
   change in any other file.

   NOTE: SVG logo files (favicon.svg, logo-stacked.svg,
   logo-horizontal.svg) and the one color reference in
   player.js cannot read these variables (standalone files /
   JS context) and must be updated by hand if the palette
   changes again.
   ============================================================ */

:root {
  /* Backgrounds — neutralized so purple, teal, and pink can all read as
     deliberate accents instead of competing with a same-family wash
     underneath them. A faint residual plum tint keeps it from feeling
     sterile, but it's low enough to functionally read as near-black. */
  --oob-bg:         #181519;  /* page background */
  --oob-bg-panel:   #231e24;  /* cards, headers, raised panels */
  --oob-bg-card:    #2e282f;  /* lightest panel tier */

  /* Primary accent (teal) — CTAs, live indicators, highlights */
  --oob-accent:      #1ac6d9;
  --oob-accent-dark: #107c88;  /* pressed/active state */

  /* Secondary pop accent (pink) — for variety alongside teal, matched
     to the same intensity so neither feels louder than the other */
  --oob-pink:      #db1a81;
  --oob-pink-dark: #891051;

  /* Third pop accent (vivid purple) — public-site only, matched to the
     same teal/pink intensity profile so it reads as a real accent
     rather than a structural fill. Kept separate from --oob-purple*
     below, which the admin panels still use and shouldn't shift. */
  --oob-purple-pop:      #8b1adb;
  --oob-purple-pop-dark: #571089;

  /* Dark purple surface — for hover/active backgrounds where some
     purple character is wanted but a vivid pop would be too loud.
     This is the same tone the backgrounds used before neutralizing. */
  --oob-purple-surface: #2d132f;

  /* Secondary accent (purple) — structural fills, icon accents, active states */
  --oob-purple:        #5e2d80;  /* medium — icon accents, badges */
  --oob-purple-dark:   #381a4d;  /* dark — active tab/button fills */
  --oob-purple-light:  #713d94;  /* light — gradient highlights */

  /* Muted text tones (legible against the plum background) */
  --oob-text:           #5b8a8f;  /* body text */
  --oob-text-dark:      #4c7276;  /* dimmer captions */
  --oob-text-light:     #78a1a5;  /* labels, secondary info */
  --oob-text-lightest:  #91b2b6;  /* lightest muted tier */

  /* Warm neutral text (unchanged by palette swaps) */
  --oob-cream:        #f0ece4;
  --oob-cream-dim:    #d8d4cc;
  --oob-cream-muted:  #b0aca4;
  --oob-cream-light:  #e8e4dc;
  --oob-cream-dark:   #c0bcb4;

  /* Status colors (functional, not brand-driven) */
  --oob-error:       #e74c3c;
  --oob-error-dark:  #c0392b;
  --oob-warning:     #e67e22;

  /* Twitch's own brand purple — intentionally NOT part of the
     OOBE palette; kept separate so the Twitch integration stays
     visually tied to Twitch's actual identity */
  --twitch-purple: #9146ff;
}