/* =========================================================================
   Entain multi-brand theme layer.
   The SI widgets (picks/widget/index) are 100% driven by CSS custom
   properties switched per [data-theme]. This file adds a [data-brand]
   layer that overrides the SAME semantic tokens with each Entain brand's
   real palette — so the layout/components are identical and ONLY the
   colors (+ logo/locale/deep-link, handled in JS) change per brand.

   Load this AFTER each page's own stylesheet so [data-brand] wins over
   the default [data-theme] tokens (equal specificity → source order).

   Brand palettes (source of truth):
   - Sports Interaction: picks.css/widget.css :root (orange #FE4000, navy #0B2234)
   - bwin:        sportingbet-cwc/config/brands/bwin.json   (yellow #FFCB00, black)
   - SportingBet: sportingbot-web/sportingbet-colors.json   (blue #0A5EEA / #061F3F)
   ========================================================================= */

/* SI defaults for the two tokens the base themes don't define yet, so the
   `rgba(var(--accent-rgb), …)` shadows and on-accent text resolve for SI too. */
:root {
  --accent-rgb: 254, 64, 0;   /* #FE4000 */
  --accent-ink: #FFFFFF;       /* readable text on the SI orange accent */
  --accent-dim: #FF6A3D;       /* "one notch dimmer" accent (bracket champion) */
}

/* ----- Sports Interaction (default) ----- */
/* No overrides: SI uses the existing [data-theme="si-dark|si-light|si-brand"]. */

/* ----- bwin — premium DARK: black surface, yellow accent ----- */
[data-brand="bwin"] {
  --accent: #FFCB00;
  --accent-rgb: 255, 203, 0;
  --accent-ink: #000000;        /* black text on yellow (white would vanish) */
  --accent-dim: #FFD84D;        /* dimmer yellow (bracket previous-champion) */
  --teal: #209CEE;

  --page: #000000;
  --surface: #0E0E0E;
  --surface-2: #181818;
  --surface-raised: #181818;
  --surface-sunken: #000000;
  --odd-bg: #141414;
  --odd-bg-hover: #1E1E1E;

  --ink: #FFFFFF;
  --c-ink: #FFFFFF;
  --ink-muted: #C9C7BE;         /* warm cream (#FFF8E1 family) */
  --c-ink-muted: #C9C7BE;
  --ink-faint: #8A8A82;

  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --line-card: rgba(255, 255, 255, 0.12);
  --line-card-strong: rgba(255, 255, 255, 0.22);

  --chip-bg: rgba(255, 203, 0, 0.16);
  --chip-ink: #FFD24D;
  --fav-glow: rgba(255, 203, 0, 0.45);

  --win: #2ECC71;
  --loss: #FF3B30;
}

/* ----- SportingBet — LIGHT canvas + electric blue ----- */
[data-brand="sportingbet"] {
  --accent: #0A5EEA;            /* bright blue */
  --accent-rgb: 10, 94, 234;
  --accent-ink: #FFFFFF;
  --accent-dim: #5E97F5;        /* lighter blue (bracket previous-champion;
                                   strip stays dark so light reads "dimmer") */
  --teal: #45CAFF;              /* light blue */

  --page: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F2F6FF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #EEEFF1;
  --odd-bg: #FFFFFF;
  --odd-bg-hover: #F2F6FF;

  --ink: #061F3F;              /* dark blue */
  --c-ink: #061F3F;
  --ink-muted: #3A5A82;
  --c-ink-muted: #3A5A82;
  --ink-faint: #6B86A6;

  --line: rgba(6, 31, 63, 0.12);
  --line-strong: rgba(6, 31, 63, 0.22);
  --line-card: rgba(6, 31, 63, 0.12);
  --line-card-strong: rgba(6, 31, 63, 0.22);

  --chip-bg: rgba(10, 94, 234, 0.10);
  --chip-ink: #003DC4;
  --fav-glow: rgba(10, 94, 234, 0.35);

  --win: #138A4E;
  --loss: #F13131;
}

/* ----- Top navigation per brand (logo swapped in JS; colors here) ----- */
/* SI keeps the default navy nav. bwin = black, SportingBet = deep blue.
   --nav-orange follows --accent and on-accent text follows --accent-ink. */
[data-brand="bwin"] .si-topnav {
  --nav-bg: rgba(0, 0, 0, 0.94);
  --nav-line: rgba(255, 255, 255, 0.16);
  --nav-link: #C9C7BE;
  --nav-link-hover: #FFFFFF;
}
[data-brand="sportingbet"] .si-topnav {
  --nav-bg: rgba(6, 31, 63, 0.96);
  --nav-line: rgba(255, 255, 255, 0.18);
  --nav-link: #B8D4F2;
  --nav-link-hover: #FFFFFF;
}