/* ============================================================================
   betman-theme.css

   Het complete rebrand van Lingoal voor de showcase. Laden ná de bestaande
   stylesheets in de App.razor van de games-host:

       <link rel="stylesheet" href="_content/WildzExpertz.Ui/css/root.css" />
       ... de rest ...
       <link rel="stylesheet" href="css/betman-theme.css" />

   Overschrijft uitsluitend tokens. Raakt geen enkele component, geen enkele
   .razor, en dus ook niet de MAUI-app.

   De tweede selector (.theme-betman) staat erbij zodat dezelfde file gescoped
   kan werken in de side-by-side vergelijking. In productie is alleen :root nodig.
   ========================================================================== */

:root,
.theme-betman {

  /* --- Merkvlak ------------------------------------------------------------
     --primary-dark-purple wordt 21x gebruikt in Lingoal: kopteksten, hint-cel,
     de rand van de powerplay-knop. Dit token alleen al doet het meeste werk. */
  --primary-dark-purple:      #0F3A44;
  --purple-600:               #12707C;
  --purple-700:               #0C4F58;
  --secondary-stroke-purple:  #1D5E68;
  --secondary-light-purple:   #9CD3DA;
  --color-grey-94:            #E2EEF0;

  /* --- Paginaachtergrond ---------------------------------------------------
     UserNoMenuLayout zet hiermee de achtergrond van élk spelscherm. Het meest
     zichtbare merkvlak op de pagina, en het is gewoon een token. */
  --xp-gradient-start:        #17727E;
  --xp-gradient-end:          #0A2F37;

  /* --- Speltoestanden ------------------------------------------------------
     Goed blijft groen, bijna-goed blijft geel: dat is spelconventie, geen
     merk. Wel andere tinten, zodat het niet Wildz'-groen is. */
  --secondary-green:          #23B893;
  --yellow-200:               #FFE9A3;
  --yellow-500:               #E5B429;
  --cta-yellow:               #FFD84D;
  --gold:                     #E8C25A;

  --primary-blue:             #7FE6EC;
  --accent-cyan:              #17C7D4;
  --secondary-dark-blue:      #0A2731;

  /* --- De Unibet-erfenis ---------------------------------------------------
     root.css heeft nog --unibet-green als alias van --green-dark. Lingoal
     gebruikt beide. De alias moet expliciet mee: een alias die met var() naar
     een ander token wijst wordt berekend op het element waar hij gedeclareerd
     staat, dus alleen --green-dark overschrijven is niet in alle gevallen
     genoeg. */
  --green-dark:               #1E6B57;
  --green-dark-900:           #14493B;
  --green-dark-950:           #0A2A22;
  --unibet-green:             #1E6B57;
  --unibet-green-500:         #1E6B57;

  /* --- Feedback ------------------------------------------------------------ */
  --error:                    #E86A63;
  --countdown-red:            #C4675F;

  /* --- Neutralen -----------------------------------------------------------
     Licht koeler getrokken zodat ze bij het teal staan in plaats van bij paars.
     De tarmac-schaal zelf blijft qua rol identiek. */
  --tarmac-gray:              #1B242B;
  --tarmac-gray-300:          #A8B6C0;
  --tarmac-gray-500:          #66757F;
  --tarmac-gray-850:          #333E47;
  --tarmac-gray-light:        #2F3941;
  --tarmac-black:             #0D1319;

  /* --- Gradiëntstops -------------------------------------------------------
     Deze twee bestaan nog niet: ze staan op vier plekken hardgecodeerd in
     Detail.razor (hint-cel 3x met verschillende hoeken, powerplay-rand 1x).
     Alleen de kleurstops zijn een token; de hoek blijft op de gebruiksplek.
     Zonder de patch blijven die vier plekken Wildz-paars/roze — het thema
     kan er niet bij. */
  --hint-cell-stops:          #E4F1F2 6.66%, #CFE6E9 93.34%;
  --brand-accent-stops:       #7FE6EC 0%, #17C7D4 25%, #12707C 55%, #2FA3AE 80%, #E8A05C 100%;
}