/* GoalBet v2 design system — design tokens. Namespaced; loaded only when ?ui=v2.
   Scope under .gbx so it cannot collide with the legacy bs / it token layers. */
.gbx {
  /* ---- PRIMITIVES: navy + neutrals ---- */
  --navy-900:#071A33; --navy-800:#0A2540; --navy-700:#0E315A; --navy-600:#143C73;
  --white:#FFFFFF;
  --gray-50:#F6F8FB;  --gray-100:#EEF2F7; --gray-200:#E2E8F0; --gray-300:#CBD5E1;
  --gray-500:#64748B; --ink:#0A2540;

  /* ---- PRIMARY: electric teal (the "pop") ---- */
  --teal-400:#5FF0E0; --teal-500:#00E0C6; --teal-600:#00C2AD;
  /* (Neon-green alternative — swap the three --c-primary* lines below to use:
     --neon-500:#19E57F; --neon-600:#12C76C; ) */

  /* ---- ACCENTS ---- */
  --up:#16A34A;   --up-glow:rgba(34,197,94,.18);
  --down:#DC2626; --down-glow:rgba(239,68,68,.16);
  --live:#E11D2A; --warn:#F59E0B;

  /* ---- SEMANTIC (components reference these) ---- */
  --c-bg:var(--gray-50); --c-surface:var(--white); --c-surface-2:var(--gray-100);
  --c-border:var(--gray-200); --c-border-strong:var(--gray-300);
  --c-text:var(--ink); --c-text-muted:var(--gray-500);

  --c-primary:var(--teal-500);          /* buttons, selected odds */
  --c-primary-hover:var(--teal-600);
  --c-primary-ink:var(--navy-900);      /* DARK text on the bright fill (legible) */
  --c-primary-glow:rgba(0,224,198,.40);

  --c-brand:var(--navy-800);
  --c-up:var(--up); --c-down:var(--down); --c-live:var(--live);

  /* ---- SPACING (4px base) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  /* ---- RADIUS ---- */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

  /* ---- ELEVATION (soft, premium) ---- */
  --sh-1:0 1px 2px rgba(10,37,64,.06);
  --sh-2:0 4px 16px rgba(10,37,64,.08);
  --sh-3:0 18px 50px rgba(10,37,64,.16);

  /* ---- TYPOGRAPHY ---- */
  --font-sans:'Inter','Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-xs:11px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px;
  --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;
  --num:"tnum" 1,"ss01" 1;

  /* ---- MOTION ---- */
  --dur-fast:120ms; --dur:200ms; --dur-slow:320ms;
  --ease-out:cubic-bezier(.22,.61,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* ---- LAYOUT ---- */
  --nav-w:248px; --slip-w:340px; --header-h:60px; --maxw:1480px;
  --z-header:100; --z-drawer:200; --z-betslip:210; --z-modal:1000; --z-toast:1100;
}

/* Per-brand re-skin: only these few tokens change per brand. */
[data-brand="goldbet1"]  .gbx { --c-primary:#F5B301; --c-primary-hover:#D99A00; --c-primary-ink:#1A1306; --c-primary-glow:rgba(245,179,1,.4); }
[data-brand="kingbet365"].gbx { --c-brand:#10233F; }
[data-brand="planet365"] .gbx { --c-brand:#0B1E40; }

/* Optional dark mode = a token remap only (built later). */
[data-theme="dark"] .gbx {
  --c-bg:#06101F; --c-surface:#0C1B30; --c-surface-2:#102742;
  --c-border:#1A2C46; --c-border-strong:#274063; --c-text:#EAF1FB; --c-text-muted:#90A3BE;
}

@media (prefers-reduced-motion: reduce){ .gbx { --dur-fast:0ms; --dur:0ms; --dur-slow:0ms; } }