/**
 * BigPlay theme.bundle.css — compiled runtime theme (no CSS imports).
 * Order: variables, spacing, typography, radius, shadows, motion, z-index,
 *        opacity, layout, light, dark.
 * Load BEFORE exchange-theme.css.
 * Rebuild: php scripts/build-theme-bundle.php
 */

/* ===== variables.css ===== */
/**
 * BigPlay Sportsbook Design System — primitive color scales
 * Wave 0 runtime primitives. Semantic maps live in light.css / dark.css.
 */

:root {
  /* ── Brand (BigPlay) ─────────────────────────────────────────────────── */
  --bp-brand-blue: #2196f3;
  --bp-brand-blue-light: #5eb1f5;
  --bp-brand-blue-soft: #c2e4ff;
  /* Dark-mode soft primary fill (do NOT overload --color-primary-lighten) */
  --bp-brand-blue-soft-dark: #1a3a55;
  --bp-brand-blue-deep: #1976d2;

  /* Brand accent — #DD3E42 (primary CTA / accent; better white-text contrast than #F63B4C) */
  --bp-orange-50: #fff1f2;
  --bp-orange-100: #ffe3e5;
  --bp-orange-200: #ffc8cb;
  --bp-orange-300: #f59a9e;
  --bp-orange-400: #e85a5e;
  --bp-orange-500: #DD3E42;
  --bp-orange-600: #C9363A; /* hover — white text ~5.16:1 */
  --bp-orange-700: #B42E32; /* active — white text ~6.22:1 */
  --bp-orange-800: #9E272B;
  --bp-orange-900: #851B2A;


  /* Legacy brand-orange aliases → brand accent */
  --bp-brand-orange: var(--bp-orange-500);
  --bp-brand-orange-hover: var(--bp-orange-600);
  --bp-brand-coral: #DD3E42;
  --bp-brand-mark-red: #DD3E42;
  --bp-brand-mark-yellow: var(--bp-orange-500);

  /* ── Slate scale (UI chrome) ─────────────────────────────────────────── */
  --bp-slate-50: #f8fafc;
  --bp-slate-100: #f1f5f9;
  --bp-slate-200: #e2e8f0;
  --bp-slate-300: #cbd5e1;
  --bp-slate-400: #94a3b8;
  --bp-slate-500: #64748b;
  --bp-slate-600: #475569;
  --bp-slate-700: #334155;
  --bp-slate-800: #1e293b;
  --bp-slate-900: #0f172a;
  --bp-slate-950: #020617;

  /* ── Neutral ─────────────────────────────────────────────────────────── */
  --bp-white: #ffffff;
  --bp-black: #000000;

  /* ── Semantic status ─────────────────────────────────────────────────── */
  --bp-success: #28c76f;
  --bp-success-light: #33d67c;
  --bp-success-strong: #16a34a;
  --bp-danger: #ea5455;
  --bp-danger-light: #ed6b6c;
  --bp-danger-strong: #dc2626;
  --bp-warning: #ff9f43;
  --bp-warning-light: #ffac5d;
  --bp-warning-strong: #f59e0b;
  --bp-info: #1e9ff2;
  --bp-secondary: #868e96;

  /* ── Odds / exchange (Betfair Exchange palette) ───────────────────────── */
  --bp-back: #72BBEF;
  --bp-back-hover: #5AACF0;
  --bp-lay: #FAA9BA;
  --bp-lay-hover: #F896A8;
  --bp-draw: #F59E0B;
  --bp-draw-hover: #FBBF24;
  --bp-odds-ink: #1a1a1a;
  /* Betfair Exchange flash — one step lighter on up, one step darker on down,
     always inside the cell's own family (never green/red, never another hue). */
  --bp-back-flash-up: color-mix(in srgb, var(--bp-back) 68%, #ffffff);
  --bp-back-flash-down: color-mix(in srgb, var(--bp-back) 82%, #000000);
  --bp-lay-flash-up: color-mix(in srgb, var(--bp-lay) 68%, #ffffff);
  --bp-lay-flash-down: color-mix(in srgb, var(--bp-lay) 82%, #000000);
  --bp-draw-flash-up: color-mix(in srgb, var(--bp-draw) 68%, #ffffff);
  --bp-draw-flash-down: color-mix(in srgb, var(--bp-draw) 82%, #000000);
  --bp-odds-flash: var(--bp-back-flash-up);

  /* ── Live ────────────────────────────────────────────────────────────── */
  --bp-live-bright: #00ff57;
  --bp-live-mid: #00ea50;
  --bp-live-dim: #00d948;
  --bp-live-glow: #66ff9a;
  --bp-live-ring: #00c94a;

  /* ── Alpha helpers (slate-900) ───────────────────────────────────────── */
  --bp-alpha-ink-06: rgba(15, 23, 42, 0.06);
  --bp-alpha-ink-08: rgba(15, 23, 42, 0.08);
  --bp-alpha-ink-10: rgba(15, 23, 42, 0.1);
  --bp-alpha-ink-12: rgba(15, 23, 42, 0.12);
  --bp-alpha-ink-14: rgba(15, 23, 42, 0.14);
  --bp-alpha-ink-16: rgba(15, 23, 42, 0.16);
  --bp-alpha-ink-18: rgba(15, 23, 42, 0.18);
  --bp-alpha-ink-22: rgba(15, 23, 42, 0.22);
  --bp-alpha-ink-28: rgba(15, 23, 42, 0.28);
  --bp-alpha-ink-35: rgba(15, 23, 42, 0.35);
  --bp-alpha-ink-55: rgba(15, 23, 42, 0.55);
  --bp-alpha-white-08: rgba(255, 255, 255, 0.08);
  --bp-alpha-white-10: rgba(255, 255, 255, 0.1);
  --bp-alpha-white-12: rgba(255, 255, 255, 0.12);
  --bp-alpha-white-14: rgba(255, 255, 255, 0.14);
  --bp-alpha-white-20: rgba(255, 255, 255, 0.2);
  --bp-alpha-white-28: rgba(255, 255, 255, 0.28);
  --bp-alpha-white-35: rgba(255, 255, 255, 0.35);
  --bp-alpha-white-40: rgba(255, 255, 255, 0.4);
  --bp-alpha-white-55: rgba(255, 255, 255, 0.55);
  --bp-alpha-black-12: rgba(0, 0, 0, 0.12);
  --bp-alpha-black-28: rgba(0, 0, 0, 0.28);
  --bp-alpha-black-35: rgba(0, 0, 0, 0.35);
  --bp-alpha-black-45: rgba(0, 0, 0, 0.45);
  --bp-alpha-orange-28: rgba(221, 62, 66, 0.28);
  --bp-alpha-orange-12: rgba(221, 62, 66, 0.12);
  --bp-alpha-orange-08: rgba(221, 62, 66, 0.08);
  --bp-alpha-orange-32: rgba(221, 62, 66, 0.32);
  /* Brand interaction alphas follow #DD3E42 accent */
  --bp-alpha-brand-08: var(--bp-alpha-orange-08);
  --bp-alpha-brand-12: var(--bp-alpha-orange-12);
  --bp-alpha-brand-32: var(--bp-alpha-orange-32);
}

/* ===== spacing.css ===== */
/**
 * Spacing scale — WP01/WP03 Design Tokens Foundation.
 * Canonical: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80
 * Prefer role aliases below in new UI; do not invent ad-hoc rem.
 */

:root {
  --theme-space-0: 0;
  --theme-space-1: 0.25rem;   /* 4px */
  --theme-space-2: 0.5rem;    /* 8px */
  --theme-space-3: 0.75rem;   /* 12px */
  --theme-space-4: 1rem;      /* 16px */
  --theme-space-5: 1.25rem;   /* 20px */
  --theme-space-6: 1.5rem;    /* 24px */
  --theme-space-7: 2rem;      /* 32px */
  --theme-space-8: 2.5rem;    /* 40px */
  --theme-space-9: 3rem;      /* 48px */
  --theme-space-10: 4rem;     /* 64px */
  --theme-space-11: 5rem;     /* 80px — hero / marketing only */

  /* Dense sportsbook micro-gaps (odds column gutters — exception) */
  --theme-space-micro: 0.125rem; /* 2px — pair/column micro only */
  --theme-space-dense: 0.25rem; /* 4px — alias of space-1 for dense chrome */

  /* ── Semantic roles (WP03) — consume these in shell/home/account ───────── */
  --theme-space-page-x: var(--theme-space-3);       /* container inline pad 12px */
  --theme-space-shell-gap: var(--theme-space-3);   /* sidebar ↔ main ↔ slip 12px */
  --theme-space-shell-gap-dense: var(--theme-space-2); /* home dense 8px */
  --theme-space-shell-pad-y: var(--theme-space-2); /* shell block padding */
  --theme-space-group-gap: var(--theme-space-2);   /* league group → group 8px */
  --theme-space-strip-gap: var(--theme-space-1);   /* schedule / cat strip 4px */
  --theme-space-row-gap: var(--theme-space-1);     /* event row stack 4px */
  --theme-space-account-main: var(--theme-space-4); /* tabs → panel 16px */
  --theme-space-account-panel: var(--theme-space-5); /* panel inner 20px */
  --theme-space-section: var(--theme-space-6);     /* section breaks 24px */
  --theme-space-fold-clearance: var(--theme-space-2); /* below sticky chrome */
  --theme-space-header-gap: var(--theme-space-dense); /* sticky rail offset */

  /* Odds grid column gutters */
  --theme-space-odds-gap: var(--theme-space-dense);      /* 4px desktop */
  --theme-space-odds-gap-mobile: var(--theme-space-micro); /* 2px phone */

  /* Layout chrome sizes (structure tokens — not page redesign) */
  --theme-header-h: 3.5rem;
  --theme-cats-h: 2.625rem;
  --theme-sidebar-w: 13.75rem;
  --theme-sidebar-w-user: 15rem; /* 240px */
  --theme-betslip-rail-w: 24rem; /* 384px — sticky right rail */
  --theme-betslip-rail-min: 20rem; /* 320px — grid min track */
  --theme-panel-radius: var(--theme-radius-xl);

  /* Layout helpers used by foundation utilities */
  --theme-section-gap: var(--theme-space-section);
  --theme-card-gap: var(--theme-space-4);
}

/* ===== typography.css ===== */
/**
 * Typography tokens — WP01 Design Tokens Foundation.
 *
 * Enterprise sportsbook canonical scale (prefer these):
 *   11 / 12 / 13 / 14 / 16 / 18 / 24
 *
 * Bridge sizes 15 / 17 / 22 remain for migration only (WP02 collapses them).
 * Weights: 400 / 500 / 600 / 700 only. Do not introduce 800 / 900.
 */

:root {
  --theme-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --theme-font-display: "Inter", var(--theme-font-sans);
  --theme-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --theme-font-features: "cv11", "ss01";

  /* ── Canonical sportsbook scale ───────────────────────────────────────── */
  --theme-text-xs: 0.6875rem;     /* 11px — micro / badges / liquidity */
  --theme-text-sm: 0.75rem;       /* 12px — caption / meta */
  --theme-text-md: 0.8125rem;     /* 13px — team / odds / table head */
  --theme-text-base: 0.875rem;    /* 14px — body / league / inputs / buttons */
  --theme-text-lg-plus: 1rem;     /* 16px — primary content / titles */
  --theme-text-xl-plus: 1.125rem; /* 18px — marketing / rare section */
  --theme-text-3xl: 1.5rem;       /* 24px — rare page / marketing titles */

  /* ── Migration bridges (WP02 removes consumers; do not use in new UI) ─── */
  --theme-text-lg: 0.9375rem;     /* 15px — bridge → prefer lg-plus (16) */
  --theme-text-xl: 1.0625rem;     /* 17px — bridge → prefer md (13) for odds */
  --theme-text-2xl: 1.375rem;     /* 22px — bridge → prefer 3xl (24) */
  --theme-text-lg-legacy: 1rem;   /* alias of 16px */

  --theme-leading-tight: 1.1;
  --theme-leading-snug: 1.25;
  --theme-leading-normal: 1.45;
  --theme-leading-body: 1.45;

  --theme-weight-regular: 400;
  --theme-weight-medium: 500;
  --theme-weight-semibold: 600;
  --theme-weight-bold: 700;
  --theme-weight-max: 700; /* enterprise cap — chrome must not exceed */

  /* Role tokens — live home contract (bet365/Betfair density) */
  --theme-type-league-size: var(--theme-text-base);       /* 14px */
  --theme-type-league-weight: var(--theme-weight-semibold); /* 600 */
  --theme-type-league-tracking: 0;
  /* Team sits just below league (14) and matches odds (13). */
  --theme-type-team-size: var(--theme-text-md);           /* 13px */
  --theme-type-team-weight: var(--theme-weight-semibold); /* 600 */
  /* Odds: 13px / 700 tabular — keep in sync with --theme-odds-font-* */
  --theme-type-odds-size: var(--theme-text-md);           /* 13px */
  --theme-type-odds-weight: var(--theme-weight-bold);     /* 700 */
  --theme-type-odds-tracking: -0.01em;
  --theme-type-odds-size-liquidity: var(--theme-text-xs);
  --theme-type-body-size: var(--theme-text-base);
  --theme-type-caption-size: var(--theme-text-sm);
  --theme-type-button-size: var(--theme-text-base);
  --theme-type-button-weight: var(--theme-weight-semibold);
  --theme-type-label-size: var(--theme-text-sm);
  --theme-type-label-weight: var(--theme-weight-semibold);
  --theme-type-table-head-size: var(--theme-text-md);
  --theme-type-table-head-weight: var(--theme-weight-bold);
  --theme-type-table-head-tracking: 0.04em;
  --theme-type-money-weight: var(--theme-weight-bold);
  --theme-type-badge-size: var(--theme-text-sm);
  --theme-type-badge-weight: var(--theme-weight-semibold);
  --theme-type-nav-size: var(--theme-text-sm);
  --theme-type-nav-weight: var(--theme-weight-medium);
  --theme-type-nav-tracking: 0;

  --heading-font: var(--theme-font-display);
  --body-font: var(--theme-font-sans);
}

/* ===== radius.css ===== */
/**
 * Border radius system — WP04 enterprise vocabulary.
 *
 * Prefer: none (0) · chip (4) · control/panel (8) · pill (999)
 * Bridge steps alias onto the four-step scale — do not use in new UI.
 */

:root {
  --theme-radius-none: 0;
  --theme-radius-sm: 4px;   /* chips / micro */
  --theme-radius-lg: 8px;   /* inputs, controls, panels */
  --theme-radius-3xl: 16px; /* banners only */
  --theme-radius-full: 999px;

  /* Semantic aliases — required for new UI */
  --theme-radius-chip: var(--theme-radius-sm);
  --theme-radius-control: var(--theme-radius-lg);
  --theme-radius-panel: var(--theme-radius-lg);
  --theme-radius-card: var(--theme-radius-lg);
  --theme-radius-odds: var(--theme-radius-none);
  --theme-radius-pill: var(--theme-radius-full);

  /* Bridges (compat) — resolve to enterprise steps */
  --theme-radius-md: var(--theme-radius-lg);
  --theme-radius-xl: var(--theme-radius-lg);
  --theme-radius-2xl: var(--theme-radius-lg);

  /* Legacy panel alias */
  --ex-panel-radius: var(--theme-radius-panel);
}

/* ===== shadows.css ===== */
/**
 * Shadow / elevation primitives — WP01 Design Tokens Foundation.
 * Theme-specific sm/md/lg live in light.css / dark.css.
 * Components should prefer --theme-shadow-level-* or --theme-shadow-sm/md/lg.
 */

:root {
  --theme-shadow-none: none;
  --theme-shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --theme-shadow-inset-bottom: inset 0 -1px 0 rgba(15, 23, 42, 0.16);
  --theme-shadow-elev-1: 0 1px 3px rgba(15, 23, 42, 0.08);
  --theme-shadow-elev-2: 0 2px 6px rgba(15, 23, 42, 0.14);
  --theme-shadow-elev-3: 0 4px 16px rgba(15, 23, 42, 0.1), 0 1px 3px rgba(15, 23, 42, 0.06);
  --theme-shadow-icon-well: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 6px rgba(255, 184, 12, 0.28);

  /* Level aliases (foundation utilities + new UI) */
  --theme-shadow-level-1: var(--theme-shadow-elev-1);
  --theme-shadow-level-2: var(--theme-shadow-elev-2);
  --theme-shadow-level-3: var(--theme-shadow-elev-3);
}

/* ===== motion.css ===== */
/**
 * Motion / transition tokens — WP01 Design Tokens Foundation.
 * Prefer these over magic ms values in component CSS.
 */

:root {
  --theme-duration-instant: 0ms;
  --theme-duration-fast: 100ms;
  --theme-duration-default: 150ms;
  --theme-duration-moderate: 200ms;
  --theme-duration-slow: 280ms;
  --theme-duration-loading: 700ms;
  --theme-duration-skeleton: 1200ms;
  --theme-duration-odds-flash: 950ms;
  --theme-duration-live-pulse: 1400ms;

  --theme-ease-default: ease-out;
  --theme-ease-in-out: ease-in-out;
  --theme-ease-linear: linear;

  --theme-transition-colors: color var(--theme-duration-default) var(--theme-ease-default),
    background-color var(--theme-duration-default) var(--theme-ease-default),
    border-color var(--theme-duration-default) var(--theme-ease-default),
    box-shadow var(--theme-duration-default) var(--theme-ease-default);
  --theme-transition-transform: transform var(--theme-duration-default) var(--theme-ease-default);
  --theme-transition-opacity: opacity var(--theme-duration-fast) var(--theme-ease-default);
  --theme-transition-hover: var(--theme-transition-colors), var(--theme-transition-transform);
  --theme-transition-focus: outline-color var(--theme-duration-instant) linear;
}

/* ===== z-index.css ===== */
/**
 * Z-index scale — WP01 Design Tokens Foundation.
 * Keep stacking predictable; never invent one-off z-index in features.
 */

:root {
  --theme-z-base: 0;
  --theme-z-raised: 1;
  --theme-z-sticky: 100;
  --theme-z-header: 200;
  --theme-z-sidebar: 250;
  --theme-z-dropdown: 300;
  --theme-z-popover: 350;
  --theme-z-overlay: 400;
  --theme-z-modal: 500;
  --theme-z-toast: 600;
  --theme-z-tooltip: 700;
  --theme-z-max: 9999;
}

/* ===== opacity.css ===== */
/**
 * Opacity scale — WP01 Design Tokens Foundation.
 */

:root {
  --theme-opacity-0: 0;
  --theme-opacity-muted: 0.64;
  --theme-opacity-disabled: 0.5;
  --theme-opacity-overlay-soft: 0.4;
  --theme-opacity-overlay: 0.55;
  --theme-opacity-hover-veil: 0.08;
  --theme-opacity-full: 1;
}

/* ===== layout.css ===== */
/**
 * Layout foundation tokens — WP01 Design Tokens Foundation.
 * Breakpoints, containers, touch targets, control heights, icons, odds geometry.
 * Components must consume these; do not invent ad-hoc px for chrome sizing.
 */

:root {
  /* Breakpoints (px) — align with Bootstrap where possible */
  --theme-bp-xs: 0;
  --theme-bp-sm: 576px;
  --theme-bp-md: 768px;
  --theme-bp-lg: 992px;
  --theme-bp-xl: 1200px;
  --theme-bp-xxl: 1400px;

  /* Content widths */
  --theme-container-max: 1440px;
  --theme-content-max: 1200px;
  --theme-section-gap: var(--theme-space-7);
  --theme-card-gap: var(--theme-space-4);

  /* Grid foundation */
  --theme-grid-columns: 12;
  --theme-grid-gutter: var(--theme-space-4);

  /* Touch / hit targets (enterprise sportsbook floor) */
  --theme-touch-min: 40px;
  --theme-touch-comfortable: 44px;
  --theme-control-height-sm: 32px;           /* compact / favorite */
  --theme-control-height-secondary: 36px;    /* Load more / Promo */
  --theme-control-height-md: 40px;           /* primary CTA / inputs */
  --theme-control-height-lg: 48px;           /* slip header / large chrome */
  --theme-control-height-primary: var(--theme-control-height-md);
  --theme-control-height-xl: var(--theme-control-height-lg);

  /* Focus ring geometry (color tokens stay in light.css / dark.css) */
  --theme-focus-ring-width: 2px;
  --theme-focus-offset: 2px; /* length for outline-offset; do not confuse with --theme-focus-ring-offset color */

  /* Icon contract (Feather/Lucide stroke language) */
  --theme-icon-sm: 1rem;       /* 16px */
  --theme-icon-md: 1.25rem;    /* 20px */
  --theme-icon-lg: 1.5rem;     /* 24px */
  --theme-icon-stroke: 2.25;

  /* Odds cell geometry (locked live norms — WP14 consumes) */
  --theme-odds-h-desktop: 36px;
  --theme-odds-h-mobile: 40px;
  --theme-odds-font-size: var(--theme-type-odds-size); /* 13px via typography role */
  --theme-odds-font-weight: var(--theme-type-odds-weight); /* 700 */

  /* Badge micro-label (BACK/LAY status) */
  --theme-badge-h: 20px;
  --theme-badge-font-size: var(--theme-text-sm); /* 12px */
  --theme-badge-font-weight: var(--theme-weight-semibold); /* 600 */
}

/* ===== light.css ===== */
/* GENERATED — SOURCE OF TRUTH: src/styles/theme/ — run: composer theme:build */
/**
 * BigPlay — Light theme semantic tokens
 * Palette:
 *   page #F5F7FA · section/sidebar #FFFFFF · card #FCFCFD
 *   page header #F8FAFC · section header #CDD5E0 · table header #F1F5F9
 *   border #E5EAF1 · primary #DD3E42
 */

.theme-light,
html.theme-light {
  color-scheme: light;

  /* Surfaces / backgrounds */
  --theme-bg-page: #F5F7FA;
  --theme-bg-elevated: #FCFCFD;
  --theme-bg-sunken: #F5F7FA;
  --theme-bg-head: #F8FAFC;
  --theme-bg-overlay: var(--bp-alpha-ink-55);
  --theme-bg-row-alt: #F5F7FA;
  --theme-bg-raised: #FFFFFF;
  --theme-bg-section: #FFFFFF;
  --theme-bg-input: #FFFFFF;
  --theme-bg-market: #FCFCFD;
  --theme-bg-market-3d: linear-gradient(180deg, #FCFCFD 0%, #F8FAFC 48%, #F5F7FA 100%);

  /* Cards */
  --theme-card-bg: #FCFCFD;
  --theme-card-border: #E5EAF1;
  --theme-card-shadow: var(--theme-shadow-sm);

  /* Headers / navigation — Page Header */
  --theme-header-bg: #F8FAFC;
  --theme-header-border: #E5EAF1;
  --theme-header-text: #000000;
  --theme-header-icon: #333333;
  --theme-header-shadow: none;
  --theme-header-sheen: transparent;
  --theme-header-active-line: linear-gradient(180deg, var(--bp-orange-400) 0%, var(--bp-orange-500) 48%, var(--bp-orange-700) 100%);
  --theme-header-active-line-shadow: 0 2px 5px var(--bp-alpha-orange-32);
  --theme-header-search-bg: #FFFFFF;
  --theme-header-search-placeholder: #888888;
  --theme-header-search-border: #E5EAF1;
  --theme-header-search-icon: var(--theme-header-icon);
  --theme-search-placeholder: #888888;

  /* Header cats */
  --theme-header-cats-bg: #F8FAFC;
  --theme-header-cats-fade: #F8FAFC;
  --theme-nav-cats-seam: #E5EAF1;
  --theme-nav-cats-seam-shadow: none;
  --theme-nav-cats-seam-height: 1px;
  --theme-header-cats-top-seam: transparent;
  --theme-header-cats-inset: none;
  --theme-header-cats-bottom-seam: #E5EAF1;
  --theme-header-cats-bottom-seam-shadow: none;

  /* Sidebar */
  --theme-sidebar-bg: #FFFFFF;
  --theme-sidebar-text: #555555;
  --theme-sidebar-text-strong: #000000;
  --theme-sidebar-icon-well: var(--bp-orange-500);
  --theme-sidebar-icon-glyph: var(--bp-white);
  --theme-sidebar-icon: var(--theme-icon-default); /* default glyph color fallback */
  --theme-sidebar-hover-bg: color-mix(in srgb, var(--bp-orange-500) 10%, #FFFFFF);
  /* Active = opposite theme's sidebar surface (dark sidebar #111827) */
  --theme-sidebar-active-bg: #111827;
  --theme-sidebar-active-text: #EEEEEE;
  /* Emboss for dark active pill on light sidebar */
  --theme-sidebar-item-hover-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -2px 4px var(--bp-alpha-ink-22),
      0 2px 6px var(--bp-alpha-ink-16);
  --theme-sidebar-item-active-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -2px 4px rgba(0, 0, 0, 0.4),
      0 2px 5px rgba(0, 0, 0, 0.28);
  --theme-sidebar-item-active-hover-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -2px 5px rgba(0, 0, 0, 0.45),
      0 3px 8px rgba(0, 0, 0, 0.32);
  --theme-sidebar-section-bg: #FFFFFF;
  --theme-sidebar-section-text: #000000;
  --theme-sidebar-section-accent: var(--bp-orange-500);
  --theme-icon-s7: #555555;

  /* Borders */
  --theme-border-default: #E5EAF1;
  --theme-border-subtle: #F5F7FA;
  --theme-border-strong: #CCCCCC;

  /* Text */
  --theme-text-primary: #000000;
  --theme-text-strong: #000000;
  --theme-text-muted: #666666;
  --theme-text-body: #333333;
  --theme-text-inverse: #FFFFFF;
  --theme-text-link: var(--bp-orange-500);

  /* Icons */
  --theme-icon-default: #333333;
  --theme-icon-muted: #666666;
  --theme-icon-on-brand: #FFFFFF;
  --theme-icon-accent: var(--bp-orange-500);
  --theme-icon-well-bg: var(--theme-btn-primary-bg, #DD3E42);
  --theme-icon-well-hover: var(--theme-btn-primary-hover);
  --theme-icon-well-active: var(--bp-orange-700);
  --theme-icon-well-shadow: inset 0 1px 0 var(--bp-alpha-white-28), 0 2px 6px var(--bp-alpha-orange-28);

  /* Buttons — solid brand (#DD3E42); hover/active darker for AA white text */
  --theme-btn-primary-bg: #DD3E42;
  --theme-btn-primary-text: #FFFFFF;
  --theme-btn-primary-hover: #C9363A;
  --theme-btn-secondary-bg: #F5F7FA;
  --theme-btn-secondary-text: #000000;
  --theme-btn-danger-bg: var(--bp-danger);
  --theme-btn-danger-text: #FFFFFF;
  --theme-btn-ghost-hover: var(--bp-alpha-ink-08);

  /* Brand / primary */
  --theme-primary: #DD3E42;
  --theme-primary-hover: var(--bp-orange-600);
  --theme-primary-active: var(--bp-orange-700);
  --theme-primary-soft: var(--bp-orange-50);
  --theme-primary-border: var(--bp-orange-200);
  --theme-primary-soft-dark: color-mix(in srgb, var(--bp-orange-500) 18%, #000000);

  /* Status */
  --theme-status-success: var(--bp-success);
  --theme-status-danger: var(--bp-danger);
  --theme-status-warning: var(--bp-warning);
  --theme-status-info: var(--bp-info);
  --theme-status-live: var(--bp-live-bright);
  /* Canonical win/profit + lose/loss ink (Open Bets text + Settled badges) */
  --theme-pl-positive: #15803D;
  --theme-pl-negative: #B91C1C;

  /* Hover / focus */
  --theme-hover-surface: var(--bp-alpha-orange-08);
  --theme-focus-ring: var(--bp-orange-400);
  --theme-focus-ring-offset: #FFFFFF;

  /* Tables — Table Header */
  --theme-table-head-bg: #F1F5F9;
  --theme-table-row-bg: #FCFCFD;
  --theme-table-row-alt: #F5F7FA;
  --theme-table-border: #E5EAF1;
  --theme-table-hover: #EEF2F7;

  /* Forms */
  --theme-input-bg: #FFFFFF;
  --theme-input-border: #E5EAF1;
  --theme-input-text: #000000;
  --theme-input-placeholder: var(--theme-search-placeholder);
  --theme-input-focus-border: var(--theme-primary);
  --theme-dropdown-bg: #FFFFFF;
  --theme-dropdown-border: #E5EAF1;
  --theme-dropdown-hover: #F5F7FA;

  /* Badges / alerts */
  --theme-badge-success-bg: color-mix(in srgb, var(--bp-success) 16%, #FFFFFF);
  --theme-badge-danger-bg: color-mix(in srgb, var(--bp-danger) 16%, #FFFFFF);
  --theme-badge-warning-bg: color-mix(in srgb, var(--bp-warning) 18%, #FFFFFF);
  --theme-badge-info-bg: color-mix(in srgb, var(--bp-info) 16%, #FFFFFF);
  --theme-alert-success-border: var(--bp-success);
  --theme-alert-danger-border: var(--bp-danger);
  --theme-alert-warning-border: var(--bp-warning);

  /* Modals / tooltips */
  --theme-modal-bg: #FCFCFD;
  --theme-modal-overlay: var(--bp-alpha-ink-55);
  --theme-tooltip-bg: #000000;
  --theme-tooltip-text: #FFFFFF;

  /* Scrollbar */
  --theme-scrollbar-track: #F5F7FA;
  --theme-scrollbar-thumb: var(--bp-orange-300);
  --theme-scrollbar-thumb-hover: var(--bp-orange-500);

  /* Charts */
  --theme-chart-grid: #E5EAF1;
  --theme-chart-axis: #666666;
  --theme-chart-series-1: var(--bp-brand-blue);
  --theme-chart-series-2: var(--bp-orange-500);
  --theme-chart-series-3: var(--bp-success);
  --theme-chart-series-4: var(--bp-lay);

  /* Shadows */
  --theme-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --theme-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --theme-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --theme-market-3d-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 0 0 1px #E5EAF1,
      0 2px 8px rgba(0, 0, 0, 0.05);

  /* Schedule section heads — clear light slate from sidebar icon family (#111827) */
  --theme-schedule-section-head-bg: #CDD5E0;
  --theme-schedule-section-head-text: #000000;
  --theme-schedule-section-head-border: #B4BECB;
  --theme-schedule-section-head-shadow: none;
  --theme-schedule-section-count-bg: rgba(0, 0, 0, 0.06);
  --theme-schedule-section-count-border: #E5EAF1;
  --theme-schedule-category-head-bg: #D5DCE6;
  --theme-schedule-category-head-text: #000000;
  --theme-schedule-category-head-border: #C3CBD6;
  --theme-schedule-category-head-accent: var(--bp-orange-500);

  /* MATCH / 1 / X / 2 column legend — between sport head and white rows */
  --theme-match-list-columns-bg: #E2E8F0;
  --theme-match-list-columns-border: #CBD5E1;

  /* Unified surface ladder — consume these aliases in components. */
  --theme-surface-page: var(--theme-bg-page);
  --theme-surface-panel: var(--theme-bg-section);
  --theme-surface-raised: var(--theme-bg-elevated);
  --theme-surface-table-head: var(--theme-table-head-bg);
  --theme-surface-section-head: var(--theme-schedule-section-head-bg);
  --theme-surface-category-head: var(--theme-schedule-category-head-bg);
  --theme-surface-subhead: var(--theme-match-list-columns-bg);
  --theme-surface-row: var(--theme-table-row-bg);
  --theme-surface-row-alt: var(--theme-table-row-alt);
  --theme-surface-row-hover: var(--theme-table-hover);
  --theme-surface-nested: #EEF2F7;
  --theme-surface-menu: var(--theme-sidebar-bg);
  --theme-surface-submenu: #FAFBFC;
  --theme-surface-footer: #FFFFFF;
  --theme-surface-active: var(--theme-sidebar-active-bg);
  --theme-surface-active-text: var(--theme-sidebar-active-text);
  --theme-surface-active-plate: linear-gradient(180deg, #2A3446 0%, #111827 52%, #0B1220 100%);

  /* Section tabs */
  --theme-section-tab-bar-bg: #FFFFFF;
  --theme-section-tab-text: #666666;
  --theme-section-tab-text-hover: var(--bp-orange-600);
  --theme-section-tab-inactive-bg: transparent;
  --theme-section-tab-hover-bg: var(--bp-orange-50);
  --theme-section-tab-active-text: var(--bp-orange-500);
  --theme-section-tab-active-bg: transparent;
  --theme-section-tab-active-line: var(--bp-orange-500);
  --theme-section-tab-active-line-grad: var(--bp-orange-500);
  --theme-section-tab-active-line-shadow: none;
  --theme-section-tab-active-shadow: none;
  --theme-section-tab-divider: #E5EAF1;

  /* Schedule tabs */
  --theme-schedule-tab-bar-bg: #FFFFFF;
  --theme-schedule-tab-text: #555555;
  --theme-schedule-tab-text-hover: var(--bp-orange-600);
  --theme-schedule-tab-inactive-bg: transparent;
  --theme-schedule-tab-hover-bg: var(--bp-orange-50);
  --theme-schedule-tab-active-bg: transparent;
  --theme-schedule-tab-active-text: var(--bp-orange-500);
  --theme-schedule-tab-active-shadow: none;
  --theme-schedule-tab-divider: #E5EAF1;

  /* Betslip */
  --theme-betslip-bar-bg: var(--theme-surface-section-head);
  --theme-betslip-bar-text: var(--theme-schedule-section-head-text);
  --theme-betslip-bar-shadow: none;
  --theme-betslip-accent: var(--bp-orange-500);
  --theme-betslip-accent-hover: var(--bp-orange-600);

  /* In-play */
  --theme-inplay-panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  --theme-inplay-track-bg: linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%);
  --theme-inplay-track-inset: inset 0 2px 8px rgba(0, 0, 0, 0.05);
  --theme-inplay-tile-bg: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
  --theme-inplay-tile-bg-hover: linear-gradient(180deg, #FFFFFF 0%, var(--bp-orange-50) 100%);
  --theme-inplay-tile-border: #E5EAF1;
  --theme-inplay-tile-shadow:
      0 2px 5px rgba(0, 0, 0, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04);
  --theme-inplay-tile-shadow-hover:
      0 6px 16px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 1),
      0 0 0 1px var(--bp-alpha-orange-12);
  --theme-inplay-tile-shadow-active:
      0 1px 2px rgba(0, 0, 0, 0.06),
      inset 0 2px 5px rgba(0, 0, 0, 0.06);
  --theme-inplay-icon-well: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
  --theme-inplay-icon-well-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.9);
  --theme-inplay-nav-bg: #F3F6FA;
  --theme-inplay-nav-shadow:
      0 2px 6px rgba(0, 0, 0, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --theme-inplay-tabs-bg: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
  --theme-inplay-tab-hover: var(--bp-alpha-orange-08);
  --theme-inplay-strip-item-hover: var(--bp-alpha-orange-08);
  --theme-inplay-strip-item-hover-text: var(--theme-primary);

  /*
   * Opposite theme ladder (dark) — for scoped cross-match (inline betting).
   * HEX lives once here; consumers remap via var(--theme-opp-*) only.
   * Mirrors public/frontend/css/theme/dark.css inline-relevant tokens.
   */
  --theme-opp-color-scheme: dark;
  --theme-opp-bg-elevated: #1A2332;
  --theme-opp-bg-sunken: #111827;
  --theme-opp-bg-head: #0B1220;
  --theme-opp-bg-row-alt: #111827;
  --theme-opp-bg-raised: #111827;
  --theme-opp-bg-section: #111827;
  --theme-opp-bg-input: #111827;
  --theme-opp-bg-market: #1A2332;
  --theme-opp-bg-market-3d: linear-gradient(180deg, #1F2A3C 0%, #1A2332 52%, #111827 100%);
  --theme-opp-border-default: #2A3446;
  --theme-opp-border-subtle: #1A2332;
  --theme-opp-border-strong: #3A4558;
  --theme-opp-text-primary: #EEEEEE;
  --theme-opp-text-strong: #EEEEEE;
  --theme-opp-text-muted: #A8A8A8;
  --theme-opp-text-body: #DDDDDD;
  --theme-opp-text-inverse: #0B1220;
  --theme-opp-table-head-bg: #0B1220;
  --theme-opp-table-row-bg: #1A2332;
  --theme-opp-table-row-alt: #111827;
  --theme-opp-table-border: #2A3446;
  --theme-opp-table-hover: #1F2A3C;
  --theme-opp-market-3d-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      inset 0 -2px 5px rgba(0, 0, 0, 0.35),
      0 0 0 1px #2A3446,
      0 2px 10px rgba(0, 0, 0, 0.4);
  --theme-opp-schedule-section-head-bg: #0B1220;
  --theme-opp-schedule-section-head-text: #EEEEEE;
  --theme-opp-schedule-section-head-border: #2A3446;
  --theme-opp-schedule-category-head-bg: #2A3446;
  --theme-opp-schedule-category-head-text: #EEEEEE;
  --theme-opp-schedule-category-head-border: #3A4558;
  --theme-opp-match-list-columns-bg: #1E293B;
  --theme-opp-match-list-columns-border: #2A3446;
  --theme-opp-surface-nested: #0D1526;
  --theme-opp-surface-footer: #111827;
  /* Dark theme's active plate = light pill (already opposite-of-dark) */
  --theme-opp-sidebar-active-bg: #FFFFFF;
  --theme-opp-sidebar-active-text: #111827;

  /* ── Exchange odds (immutable Back/Lay/Draw/Yes/No — same in both themes) ─ */
  --theme-odds-back: var(--bp-back);
  --theme-odds-back-hover: var(--bp-back-hover);
  --theme-odds-back-text: var(--bp-odds-ink);
  --theme-odds-lay: var(--bp-lay);
  --theme-odds-lay-hover: var(--bp-lay-hover);
  --theme-odds-lay-text: var(--bp-odds-ink);
  --theme-odds-draw: var(--bp-draw);
  --theme-odds-draw-hover: var(--bp-draw-hover);
  --theme-odds-draw-text: var(--bp-odds-ink);
  /* Fancy / Session Yes|No (green / red) */
  --theme-odds-yes: var(--bp-success-strong);
  --theme-odds-yes-hover: var(--bp-success);
  --theme-odds-yes-text: var(--theme-icon-on-brand, var(--bp-white));
  --theme-odds-no: var(--bp-danger-strong);
  --theme-odds-no-hover: var(--bp-danger);
  --theme-odds-no-text: var(--theme-icon-on-brand, var(--bp-white));

  /* ── Market flags BM / F / GL (color + pattern; never color alone) ─────── */
  --theme-flag-on-bg: #006400;
  --theme-flag-on-text: #FFFFFF;
  --theme-flag-off-bg: #CBD5E1;
  --theme-flag-off-text: #64748B;
  --theme-flag-bm-accent: transparent; /* solid fill = BM */
  --theme-flag-fancy-accent: none; /* no amber underline under F */
  --theme-flag-gl-accent: none; /* GL matches BM when available */
}

/* ===== dark.css ===== */
/* GENERATED — SOURCE OF TRUTH: src/styles/theme/ — run: composer theme:build */
/**
 * BigPlay — Dark theme semantic tokens
 * Palette:
 *   page #0F172A · section #111827 · card #1A2332 · header #0B1220
 *   sidebar #111827 · border #2A3446 · text #EEEEEE · accent #DD3E42
 */

.theme-dark,
html.theme-dark {
  color-scheme: dark;

  /* Surfaces */
  --theme-bg-page: #0F172A;
  --theme-bg-elevated: #1A2332;
  --theme-bg-sunken: #111827;
  --theme-bg-head: #0B1220;
  --theme-bg-overlay: var(--bp-alpha-black-45);
  --theme-bg-row-alt: #111827;
  --theme-bg-input: #111827;
  --theme-bg-market: #1A2332;
  --theme-bg-market-3d: linear-gradient(180deg, #1F2A3C 0%, #1A2332 52%, #111827 100%);
  --theme-bg-raised: #111827;
  --theme-bg-section: #111827;

  /* Cards */
  --theme-card-bg: #1A2332;
  --theme-card-border: #2A3446;
  --theme-card-shadow: none;

  /* Headers / navigation */
  --theme-header-bg: #0B1220;
  --theme-header-border: #2A3446;
  --theme-header-text: #EEEEEE;
  --theme-header-icon: #DDDDDD;
  --theme-header-shadow: none;
  --theme-header-sheen: transparent;
  --theme-header-active-line: linear-gradient(180deg, var(--bp-orange-400) 0%, var(--bp-orange-500) 50%, var(--bp-orange-700) 100%);
  --theme-header-active-line-shadow: 0 2px 6px var(--bp-alpha-orange-32);
  --theme-header-search-bg: #111827;
  --theme-header-search-placeholder: #888888;
  --theme-header-search-border: #2A3446;
  --theme-header-search-icon: var(--theme-header-icon);
  --theme-search-placeholder: #888888;

  /* Header cats */
  --theme-header-cats-bg: #0B1220;
  --theme-header-cats-fade: #0B1220;
  --theme-nav-cats-seam: #2A3446;
  --theme-nav-cats-seam-shadow: none;
  --theme-nav-cats-seam-height: 1px;
  --theme-header-cats-top-seam: transparent;
  --theme-header-cats-inset: none;
  --theme-header-cats-bottom-seam: #2A3446;
  --theme-header-cats-bottom-seam-shadow: none;

  /* Sidebar */
  --theme-sidebar-bg: #111827;
  --theme-sidebar-text: #DDDDDD;
  --theme-sidebar-text-strong: #EEEEEE;
  --theme-sidebar-icon-well: var(--bp-orange-500);
  --theme-sidebar-icon-glyph: #FFFFFF;
  --theme-sidebar-icon: var(--theme-icon-default); /* default glyph color fallback */
  --theme-sidebar-hover-bg: color-mix(in srgb, var(--bp-orange-500) 14%, #1A2332);
  /* Active = opposite theme's sidebar surface (light sidebar #FFFFFF) */
  --theme-sidebar-active-bg: #FFFFFF;
  --theme-sidebar-active-text: #111827;
  /* Same emboss structure as light — tuned for white active pill */
  --theme-sidebar-item-hover-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -2px 4px rgba(122, 48, 0, 0.28),
      0 2px 6px var(--bp-alpha-orange-28);
  --theme-sidebar-item-active-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -2px 4px rgba(15, 23, 42, 0.12),
      0 2px 5px rgba(15, 23, 42, 0.12);
  --theme-sidebar-item-active-hover-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -2px 5px rgba(15, 23, 42, 0.16),
      0 3px 8px rgba(15, 23, 42, 0.14);
  --theme-sidebar-section-bg: #1A2332;
  --theme-sidebar-section-text: #EEEEEE;
  --theme-sidebar-section-accent: var(--bp-orange-500);
  --theme-icon-s7: #DDDDDD;

  /* Borders */
  --theme-border-default: #2A3446;
  --theme-border-subtle: #1A2332;
  --theme-border-strong: #3A4558;

  /* Text */
  --theme-text-primary: #EEEEEE;
  --theme-text-strong: #EEEEEE;
  --theme-text-muted: #A8A8A8; /* AA-safer on page #0F172A */
  --theme-text-body: #DDDDDD;
  --theme-text-inverse: #0B1220;
  --theme-text-link: var(--bp-orange-400);

  /* Icons */
  --theme-icon-default: #DDDDDD;
  --theme-icon-muted: #888888;
  --theme-icon-on-brand: #FFFFFF;
  --theme-icon-accent: var(--bp-orange-400);
  --theme-icon-well-bg: var(--theme-btn-primary-bg, #DD3E42);
  --theme-icon-well-hover: var(--theme-btn-primary-hover);
  --theme-icon-well-active: var(--bp-orange-700);
  --theme-icon-well-shadow: inset 0 1px 0 var(--bp-alpha-white-28), 0 2px 6px var(--bp-alpha-orange-28);

  /* Buttons — solid brand (#DD3E42); hover/active darker for AA white text */
  --theme-btn-primary-bg: #DD3E42;
  --theme-btn-primary-text: #FFFFFF;
  --theme-btn-primary-hover: #C9363A;
  --theme-btn-secondary-bg: #1A2332;
  --theme-btn-secondary-text: #EEEEEE;
  --theme-btn-danger-bg: var(--bp-danger);
  --theme-btn-danger-text: #FFFFFF;
  --theme-btn-ghost-hover: var(--bp-alpha-white-08);

  /* Brand / primary */
  --theme-primary: #DD3E42;
  --theme-primary-hover: var(--bp-orange-600);
  --theme-primary-active: var(--bp-orange-700);
  --theme-primary-soft: color-mix(in srgb, var(--bp-orange-500) 16%, #1A2332);
  --theme-primary-border: var(--bp-orange-700);
  --theme-primary-soft-dark: color-mix(in srgb, var(--bp-orange-500) 22%, #0F172A);

  /* Status */
  --theme-status-success: var(--bp-success);
  --theme-status-danger: var(--bp-danger);
  --theme-status-warning: var(--bp-warning);
  --theme-status-info: var(--bp-info);
  --theme-status-live: var(--bp-live-bright);
  /* Canonical win/profit + lose/loss ink (Open Bets text + Settled badges) */
  --theme-pl-positive: #4ADE80;
  --theme-pl-negative: #F87171;

  /* Hover / focus */
  --theme-hover-surface: var(--bp-alpha-orange-12);
  --theme-focus-ring: var(--bp-orange-400);
  --theme-focus-ring-offset: #1A2332;

  /* Tables */
  --theme-table-head-bg: #0B1220;
  --theme-table-row-bg: #1A2332;
  --theme-table-row-alt: #111827;
  --theme-table-border: #2A3446;
  --theme-table-hover: #1F2A3C;

  /* Forms */
  --theme-input-bg: #111827;
  --theme-input-border: #2A3446;
  --theme-input-text: #EEEEEE;
  --theme-input-placeholder: var(--theme-search-placeholder);
  --theme-input-focus-border: var(--theme-primary);
  --theme-dropdown-bg: #1A2332;
  --theme-dropdown-border: #2A3446;
  --theme-dropdown-hover: #1F2A3C;

  /* Badges / alerts */
  --theme-badge-success-bg: color-mix(in srgb, var(--bp-success) 22%, #1A2332);
  --theme-badge-danger-bg: color-mix(in srgb, var(--bp-danger) 22%, #1A2332);
  --theme-badge-warning-bg: color-mix(in srgb, var(--bp-warning) 22%, #1A2332);
  --theme-badge-info-bg: color-mix(in srgb, var(--bp-info) 22%, #1A2332);
  --theme-alert-success-border: var(--bp-success);
  --theme-alert-danger-border: var(--bp-danger);
  --theme-alert-warning-border: var(--bp-warning);

  /* Modals / tooltips */
  --theme-modal-bg: #1A2332;
  --theme-modal-overlay: var(--bp-alpha-black-45);
  --theme-tooltip-bg: #0B1220;
  --theme-tooltip-text: #EEEEEE;

  /* Scrollbar */
  --theme-scrollbar-track: #111827;
  --theme-scrollbar-thumb: var(--bp-orange-700);
  --theme-scrollbar-thumb-hover: var(--bp-orange-500);

  /* Charts */
  --theme-chart-grid: #2A3446;
  --theme-chart-axis: #999999;
  --theme-chart-series-1: var(--bp-brand-blue-light);
  --theme-chart-series-2: var(--bp-orange-400);
  --theme-chart-series-3: var(--bp-success);
  --theme-chart-series-4: var(--bp-lay);

  /* Shadows */
  --theme-shadow-sm: none;
  --theme-shadow-md: 0 4px 12px var(--bp-alpha-black-35);
  --theme-shadow-lg: 0 8px 24px var(--bp-alpha-black-45);
  --theme-market-3d-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      inset 0 -2px 5px rgba(0, 0, 0, 0.35),
      0 0 0 1px #2A3446,
      0 2px 10px rgba(0, 0, 0, 0.4);

  /* Schedule section heads */
  --theme-schedule-section-head-bg: #0B1220;
  --theme-schedule-section-head-text: #EEEEEE;
  --theme-schedule-section-head-border: #2A3446;
  --theme-schedule-section-head-shadow: none;
  --theme-schedule-section-count-bg: rgba(255, 255, 255, 0.06);
  --theme-schedule-section-count-border: #2A3446;
  --theme-schedule-category-head-bg: #2A3446;
  --theme-schedule-category-head-text: #EEEEEE;
  --theme-schedule-category-head-border: #3A4558;
  --theme-schedule-category-head-accent: var(--bp-orange-500);

  /* MATCH / 1 / X / 2 column legend */
  --theme-match-list-columns-bg: #1E293B;
  --theme-match-list-columns-border: #2A3446;

  /* Unified surface ladder — consume these aliases in components. */
  --theme-surface-page: var(--theme-bg-page);
  --theme-surface-panel: var(--theme-bg-section);
  --theme-surface-raised: var(--theme-bg-elevated);
  --theme-surface-table-head: var(--theme-table-head-bg);
  --theme-surface-section-head: var(--theme-schedule-section-head-bg);
  --theme-surface-category-head: var(--theme-schedule-category-head-bg);
  --theme-surface-subhead: var(--theme-match-list-columns-bg);
  --theme-surface-row: var(--theme-table-row-bg);
  --theme-surface-row-alt: var(--theme-table-row-alt);
  --theme-surface-row-hover: var(--theme-table-hover);
  --theme-surface-nested: #0D1526;
  --theme-surface-menu: var(--theme-sidebar-bg);
  --theme-surface-submenu: var(--theme-sidebar-section-bg);
  --theme-surface-footer: #111827;
  --theme-surface-active: var(--theme-sidebar-active-bg);
  --theme-surface-active-text: var(--theme-sidebar-active-text);
  --theme-surface-active-plate: linear-gradient(180deg, #FFFFFF 0%, #F3F5F8 52%, #E5EAF1 100%);

  /* Section tabs */
  --theme-section-tab-bar-bg: #1A2332;
  --theme-section-tab-text: #999999;
  --theme-section-tab-text-hover: var(--bp-orange-400);
  --theme-section-tab-inactive-bg: transparent;
  --theme-section-tab-hover-bg: var(--bp-alpha-orange-12);
  --theme-section-tab-active-text: var(--bp-orange-400);
  --theme-section-tab-active-bg: transparent;
  --theme-section-tab-active-line: var(--bp-orange-500);
  --theme-section-tab-active-line-grad: var(--bp-orange-500);
  --theme-section-tab-active-line-shadow: none;
  --theme-section-tab-active-shadow: none;
  --theme-section-tab-divider: #2A3446;

  /* Schedule tabs */
  --theme-schedule-tab-bar-bg: #1A2332;
  --theme-schedule-tab-text: #999999;
  --theme-schedule-tab-text-hover: var(--bp-orange-400);
  --theme-schedule-tab-inactive-bg: transparent;
  --theme-schedule-tab-hover-bg: var(--bp-alpha-orange-12);
  --theme-schedule-tab-active-bg: transparent;
  --theme-schedule-tab-active-text: var(--bp-orange-400);
  --theme-schedule-tab-active-shadow: none;
  --theme-schedule-tab-divider: #2A3446;

  /* Betslip */
  --theme-betslip-bar-bg: var(--theme-surface-section-head);
  --theme-betslip-bar-text: var(--theme-schedule-section-head-text);
  --theme-betslip-bar-shadow: none;
  --theme-betslip-accent: var(--bp-orange-500);
  --theme-betslip-accent-hover: var(--bp-orange-400);

  /* In-play */
  --theme-inplay-panel-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --theme-inplay-track-bg: linear-gradient(180deg, #0F172A 0%, #111827 100%);
  --theme-inplay-track-inset: inset 0 3px 10px rgba(0, 0, 0, 0.55);
  --theme-inplay-tile-bg: linear-gradient(180deg, #1F2A3C 0%, #1A2332 100%);
  --theme-inplay-tile-bg-hover: linear-gradient(180deg, #243247 0%, #1A2332 100%);
  --theme-inplay-tile-border: #2A3446;
  --theme-inplay-tile-shadow:
      0 4px 10px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  --theme-inplay-tile-shadow-hover:
      0 8px 20px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 1px var(--bp-alpha-orange-32);
  --theme-inplay-tile-shadow-active:
      0 1px 3px rgba(0, 0, 0, 0.5),
      inset 0 3px 7px rgba(0, 0, 0, 0.45);
  --theme-inplay-icon-well: linear-gradient(180deg, #1A2332 0%, #111827 100%);
  --theme-inplay-icon-well-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.04);
  --theme-inplay-nav-bg: linear-gradient(180deg, #1A2332 0%, #111827 100%);
  --theme-inplay-nav-shadow:
      0 3px 10px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --theme-inplay-tabs-bg: linear-gradient(180deg, #1A2332 0%, #0F172A 100%);
  --theme-inplay-tab-hover: var(--bp-alpha-orange-12);
  --theme-inplay-strip-item-hover: var(--bp-alpha-orange-12);
  --theme-inplay-strip-item-hover-text: var(--bp-orange-400);

  /*
   * Opposite theme ladder (light) — for scoped cross-match (inline betting).
   * HEX lives once here; consumers remap via var(--theme-opp-*) only.
   * Mirrors public/frontend/css/theme/light.css inline-relevant tokens.
   */
  --theme-opp-color-scheme: light;
  --theme-opp-bg-elevated: #FCFCFD;
  --theme-opp-bg-sunken: #F5F7FA;
  --theme-opp-bg-head: #F8FAFC;
  --theme-opp-bg-row-alt: #F5F7FA;
  --theme-opp-bg-raised: #FFFFFF;
  --theme-opp-bg-section: #FFFFFF;
  --theme-opp-bg-input: #FFFFFF;
  --theme-opp-bg-market: #FCFCFD;
  --theme-opp-bg-market-3d: linear-gradient(180deg, #FCFCFD 0%, #F8FAFC 48%, #F5F7FA 100%);
  --theme-opp-border-default: #E5EAF1;
  --theme-opp-border-subtle: #F5F7FA;
  --theme-opp-border-strong: #CCCCCC;
  --theme-opp-text-primary: #000000;
  --theme-opp-text-strong: #000000;
  --theme-opp-text-muted: #666666;
  --theme-opp-text-body: #333333;
  --theme-opp-text-inverse: #FFFFFF;
  --theme-opp-table-head-bg: #F1F5F9;
  --theme-opp-table-row-bg: #FCFCFD;
  --theme-opp-table-row-alt: #F5F7FA;
  --theme-opp-table-border: #E5EAF1;
  --theme-opp-table-hover: #EEF2F7;
  --theme-opp-market-3d-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 0 0 1px #E5EAF1,
      0 2px 8px rgba(0, 0, 0, 0.05);
  --theme-opp-schedule-section-head-bg: #CDD5E0;
  --theme-opp-schedule-section-head-text: #000000;
  --theme-opp-schedule-section-head-border: #B4BECB;
  --theme-opp-schedule-category-head-bg: #D5DCE6;
  --theme-opp-schedule-category-head-text: #000000;
  --theme-opp-schedule-category-head-border: #C3CBD6;
  --theme-opp-match-list-columns-bg: #E2E8F0;
  --theme-opp-match-list-columns-border: #CBD5E1;
  --theme-opp-surface-nested: #EEF2F7;
  --theme-opp-surface-footer: #FFFFFF;
  /* Light theme's active plate = dark pill (already opposite-of-light) */
  --theme-opp-sidebar-active-bg: #111827;
  --theme-opp-sidebar-active-text: #EEEEEE;

  /* ── Exchange odds (immutable Back/Lay/Draw/Yes/No — same in both themes) ─ */
  --theme-odds-back: var(--bp-back);
  --theme-odds-back-hover: var(--bp-back-hover);
  --theme-odds-back-text: var(--bp-odds-ink);
  --theme-odds-lay: var(--bp-lay);
  --theme-odds-lay-hover: var(--bp-lay-hover);
  --theme-odds-lay-text: var(--bp-odds-ink);
  --theme-odds-draw: var(--bp-draw);
  --theme-odds-draw-hover: var(--bp-draw-hover);
  --theme-odds-draw-text: var(--bp-odds-ink);
  /* Fancy / Session Yes|No (green / red) */
  --theme-odds-yes: var(--bp-success-strong);
  --theme-odds-yes-hover: var(--bp-success);
  --theme-odds-yes-text: var(--theme-icon-on-brand, var(--bp-white));
  --theme-odds-no: var(--bp-danger-strong);
  --theme-odds-no-hover: var(--bp-danger);
  --theme-odds-no-text: var(--theme-icon-on-brand, var(--bp-white));

  /* ── Market flags BM / F / GL (color + pattern; never color alone) ─────── */
  --theme-flag-on-bg: #006400;
  --theme-flag-on-text: #FFFFFF;
  --theme-flag-off-bg: #475569;
  --theme-flag-off-text: #94A3B8;
  --theme-flag-bm-accent: transparent;
  --theme-flag-fancy-accent: none;
  --theme-flag-gl-accent: none; /* GL matches BM when available */
}