/* ============================================================
   wp_tokens.css — Single source of truth for all design tokens
   Include this file ONCE, before wp_lnd_shared.css or wp_cp_shared.css
   ============================================================ */

:root {

  /* ── Backgrounds ─────────────────────────────── */
  --bg:           #1a1a1a; /* Cod Grey          */
  --nav:          #000;    /* Black             */
  --topBar:       #000;    /* Black             */
  --bottomBar:    #000;    /* Black             */
  --header:       #000;    /* Black             */
  --sideNav:      #222;    /* Mine Shaft        */
  --gradStart:    #000;    /* Black             */
  --gradEnd:      #1a1a1a; /* Cod Grey          */

  /* ── Text & Headings ─────────────────────────── */
  --text:         #fff;    /* White             */
  --h1:           #e3cc00; /* Corn              */
  --h2:           #e89f00; /* Orange Peel       */
  --h3:           #f8e273; /* Marigold Yellow   */
  --note:         #999;    /* Dusty Gray        */

  /* ── Links ───────────────────────────────────── */
  --gLink:        #22f7de; /* Bright Turquoise  */
  --NavLink:      #ccc;    /* Silver (landing)  */
  --sideNavLink:  #ccc;    /* Silver (app)      */

  /* ── Nav / Active States ─────────────────────── */
  --active:       #e89f00; /* Orange Peel       */
  --hover:        #e3cc00; /* Corn              */
  --activeNav:    #222;    /* Mine Shaft        */
  --linkHover:    #575757; /* Scorpion          */
                           /* NOTE: lnd had #222, cp had #575757 — unified to #575757 */
  --collapseHover:#575757; /* Scorpion          */
  --burgerBar:    #fff;    /* White             */

  /* ── Buttons ─────────────────────────────────── */
  --clickButton:  #007823; /* Fun Green         */
  --hoverButton:  #337823; /* Forest Green      */
  --dangerButton: #78000d; /* Dark Red          */
                           /* NOTE: lnd had #d22828, cp had #78000d — unified to cp value */

  /* ── Accents / Highlights ────────────────────── */
  --highlight:    #ffcc00; /* Supernova         */
  --mainContainer:#f8e273; /* Marigold Yellow   */
  --subContainer: #22f7de; /* Bright Turquoise  */
                           /* NOTE: lnd had #00f2ff, cp had #22f7de — unified to cp value */
  --twitch:       #9147ff; /* Electric Violet   */
  --twitchHover:  #772ce8; /* Purple Heart      */

  /* ── Shadows ─────────────────────────────────── */
  --boxShadow: rgba(0, 0, 0, 0.5);
}

/* ── Light mode overrides ────────────────────────────────────
   Apply by adding class="light" to <body> or a wrapper element.
   Only tokens that meaningfully differ from dark mode are listed.
   ──────────────────────────────────────────────────────────── */
.light {

  /* ── Backgrounds ─────────────────────────────── */
  --bg:           #f4f4f4; /* Light Grey        */
  --nav:          #ffffff; /* White             */
  --topBar:       #ffffff; /* White             */
  --bottomBar:    #e0e0e0; /* Gainsboro         */
  --header:       #ffffff; /* White             */
  --sideNav:      #ececec; /* Whisper           */
  --gradStart:    #ffffff; /* White             */
  --gradEnd:      #f4f4f4; /* Light Grey        */

  /* ── Text & Headings ─────────────────────────── */
  --text:         #1a1a1a; /* Cod Grey          */
  --h1:           #a08800; /* Dark Gold         — darkened for contrast on light bg */
  --h2:           #b36b00; /* Dark Orange       — darkened for contrast on light bg */
  --h3:           #8a6f00; /* Dark Mustard      — darkened for contrast on light bg */
  --note:         #666666; /* Dove Gray         */

  /* ── Links ───────────────────────────────────── */
  --gLink:        #0099a8; /* Dark Cyan         — darkened turquoise for readability */
  --NavLink:      #444444; /* Tundora            */
  --sideNavLink:  #444444; /* Tundora            */

  /* ── Nav / Active States ─────────────────────── */
  --active:       #b36b00; /* Dark Orange       */
  --hover:        #a08800; /* Dark Gold         */
  --activeNav:    #e0e0e0; /* Gainsboro         */
  --linkHover:    #d6d6d6; /* Light Silver      */
  --collapseHover:#d6d6d6; /* Light Silver      */
  --burgerBar:    #1a1a1a; /* Cod Grey          */

  /* ── Buttons ─────────────────────────────────── */
  --clickButton:  #006b1f; /* Darker Fun Green  — better contrast on light bg */
  --hoverButton:  #005518; /* Even Darker Green */
  --dangerButton: #a30000; /* Dark Red          — accessible on light bg */

  /* ── Accents / Highlights ────────────────────── */
  --highlight:    #b38f00; /* Dark Supernova    — darkened for contrast */
  --mainContainer:#b38f00; /* Dark Supernova    */
  --subContainer: #0099a8; /* Dark Cyan         */

  /* ── Shadows ─────────────────────────────────── */
  --boxShadow: rgba(0, 0, 0, 0.15); /* Softer on light backgrounds */

  /* Twitch brand colours intentionally unchanged — they're fixed brand values */

}