:root[data-theme="dark-professional"] {
  color-scheme: dark;

  /* ========================= BRAND ========================= */
  --color-brand-primary: #60a5fa;
  --color-brand-secondary: #a78bfa;
  --color-brand-accent: #22d3ee;
  --color-brand-highlight: #fbbf24;

  /* ========================= BACKGROUNDS ========================= */
  --bg-body: #020617;
  --bg-page: #0f172a;
  --bg-surface-1: #111827;
  --bg-surface-2: #1e293b;
  --bg-surface-3: #334155;
  --bg-navbar: rgba(15, 23, 42, 0.86);
  --bg-sidebar: #020617;
  --bg-footer: #020617;
  --bg-card: #111827;
  --bg-modal: #111827;
  --bg-dropdown: #111827;
  --bg-tooltip: #f8fafc;

  /* ========================= TEXT ========================= */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-disabled: #64748b;
  --text-inverse: #020617;
  --text-link: #60a5fa;
  --text-link-hover: #93c5fd;

  /* ========================= BORDERS ========================= */
  --border-light: rgba(148, 163, 184, 0.18);
  --border-normal: rgba(148, 163, 184, 0.32);
  --border-strong: rgba(203, 213, 225, 0.48);
  --border-focus: #60a5fa;
  --border-width-normal: 1px;

  /* ========================= STATUS ========================= */
  --success: #22c55e;
  --warning: #fbbf24;
  --danger: #f87171;
  --info: #38bdf8;
  --success-bg: rgba(34, 197, 94, 0.14);
  --warning-bg: rgba(251, 191, 36, 0.14);
  --danger-bg: rgba(248, 113, 113, 0.14);
  --info-bg: rgba(56, 189, 248, 0.14);

  /* ========================= TYPOGRAPHY ========================= */
  --font-family-primary: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-family-secondary: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-size-display-xl: 3.5rem;
  --font-size-display-lg: 3rem;
  --font-size-h1: 2.25rem;
  --font-size-h2: 1.875rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  --font-size-body-lg: 1.125rem;
  --font-size-body: 1rem;
  --font-size-body-sm: 0.875rem;
  --font-size-caption: 0.75rem;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --line-height-tight: 1.15;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* ========================= SPACING ========================= */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ========================= RADIUS ========================= */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.75rem;
  --radius-pill: 999px;

  /* ========================= SHADOWS / GLASS / GLOW ========================= */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.52);
  --shadow-xl: 0 28px 80px rgba(0, 0, 0, 0.62);
  --glass-bg: rgba(15, 23, 42, 0.72);
  --glass-border: rgba(148, 163, 184, 0.24);
  --glass-blur: 20px;
  --glow-primary: 0 0 0 rgba(96, 165, 250, 0);
  --glow-hover: 0 0 32px rgba(96, 165, 250, 0.22);
  --glow-focus: 0 0 0 4px rgba(96, 165, 250, 0.22);

  /* ========================= NAVBAR / SIDEBAR ========================= */
  --navbar-bg: var(--bg-navbar);
  --navbar-text: var(--text-secondary);
  --navbar-text-active: #93c5fd;
  --navbar-item-hover-bg: rgba(96, 165, 250, 0.12);
  --navbar-border: var(--border-light);
  --navbar-backdrop-blur: 20px;
  --sidebar-bg: #020617;
  --sidebar-text: #cbd5e1;
  --sidebar-icon: #94a3b8;
  --sidebar-item-hover-bg: rgba(148, 163, 184, 0.12);
  --sidebar-item-active-bg: rgba(96, 165, 250, 0.16);
  --sidebar-item-active-text: #93c5fd;
  --sidebar-border: var(--border-light);

  /* ========================= BUTTONS ========================= */
  --btn-primary-bg: #2563eb;
  --btn-primary-text: #ffffff;
  --btn-primary-border: #3b82f6;
  --btn-primary-hover-bg: #1d4ed8;
  --btn-primary-active-bg: #1e40af;
  --btn-primary-disabled-bg: #1e3a8a;
  --btn-secondary-bg: #1e293b;
  --btn-secondary-text: #f8fafc;
  --btn-secondary-border: rgba(148, 163, 184, 0.32);
  --btn-secondary-hover-bg: #334155;
  --btn-outline-bg: transparent;
  --btn-outline-text: #93c5fd;
  --btn-outline-border: #60a5fa;
  --btn-outline-hover-bg: rgba(96, 165, 250, 0.14);
  --btn-ghost-bg: transparent;
  --btn-ghost-text: #cbd5e1;
  --btn-ghost-hover-bg: rgba(148, 163, 184, 0.12);
  --btn-danger-bg: #dc2626;
  --btn-danger-text: #ffffff;
  --btn-danger-hover-bg: #b91c1c;

  /* ========================= INPUTS ========================= */
  --input-bg: #020617;
  --input-text: #f8fafc;
  --input-placeholder: #64748b;
  --input-border: rgba(148, 163, 184, 0.32);
  --input-border-hover: rgba(203, 213, 225, 0.48);
  --input-border-focus: #60a5fa;
  --input-focus-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18);
  --input-disabled-bg: #111827;
  --input-disabled-text: #64748b;
  --input-error-border: #f87171;
  --input-success-border: #22c55e;

  /* ========================= TABLES ========================= */
  --table-bg: #111827;
  --table-header-bg: #020617;
  --table-header-text: #cbd5e1;
  --table-row-bg: #111827;
  --table-row-alt-bg: #0f172a;
  --table-row-hover-bg: rgba(96, 165, 250, 0.1);
  --table-row-selected-bg: rgba(96, 165, 250, 0.18);
  --table-border: rgba(148, 163, 184, 0.18);
  --table-cell-text: #cbd5e1;

  /* ========================= CARDS ========================= */
  --card-bg: #111827;
  --card-border: rgba(148, 163, 184, 0.18);
  --card-title: #f8fafc;
  --card-subtitle: #94a3b8;
  --card-shadow: var(--shadow-md);
  --card-hover-shadow: var(--shadow-lg);
  --card-hover-transform: translateY(-3px);

  /* ========================= MODALS / DROPDOWNS / TOOLTIPS ========================= */
  --modal-overlay-bg: rgba(0, 0, 0, 0.68);
  --modal-bg: #111827;
  --modal-header-bg: #111827;
  --modal-footer-bg: #0f172a;
  --modal-border: rgba(148, 163, 184, 0.18);
  --modal-shadow: var(--shadow-xl);
  --dropdown-bg: #111827;
  --dropdown-text: #cbd5e1;
  --dropdown-hover-bg: rgba(148, 163, 184, 0.12);
  --dropdown-selected-bg: rgba(96, 165, 250, 0.16);
  --dropdown-border: rgba(148, 163, 184, 0.18);
  --dropdown-shadow: var(--shadow-lg);
  --tooltip-bg: #f8fafc;
  --tooltip-text: #020617;
  --tooltip-shadow: var(--shadow-md);

  /* ========================= BADGES / ALERTS ========================= */
  --badge-bg: rgba(148, 163, 184, 0.14);
  --badge-text: #cbd5e1;
  --badge-border: rgba(148, 163, 184, 0.22);
  --alert-success-bg: rgba(34, 197, 94, 0.14);
  --alert-success-text: #86efac;
  --alert-success-border: rgba(34, 197, 94, 0.35);
  --alert-warning-bg: rgba(251, 191, 36, 0.14);
  --alert-warning-text: #fde68a;
  --alert-warning-border: rgba(251, 191, 36, 0.35);
  --alert-danger-bg: rgba(248, 113, 113, 0.14);
  --alert-danger-text: #fecaca;
  --alert-danger-border: rgba(248, 113, 113, 0.35);
  --alert-info-bg: rgba(56, 189, 248, 0.14);
  --alert-info-text: #bae6fd;
  --alert-info-border: rgba(56, 189, 248, 0.35);

  /* ========================= SPORTS COMPONENTS ========================= */
  --match-card-bg: #111827;
  --match-card-border: rgba(148, 163, 184, 0.18);
  --match-card-hover-bg: #1e293b;
  --match-live-bg: rgba(248, 113, 113, 0.16);
  --match-live-text: #fca5a5;
  --match-live-glow: var(--glow-hover);
  --score-leading: #4ade80;
  --score-trailing: #f87171;
  --score-draw: #94a3b8;
  --prediction-bg: rgba(251, 191, 36, 0.14);
  --prediction-border: rgba(251, 191, 36, 0.35);
  --prediction-text: #fde68a;
  --ranking-top-bg: rgba(251, 191, 36, 0.16);
  --ranking-top-border: rgba(251, 191, 36, 0.35);
  --ranking-user-bg: rgba(96, 165, 250, 0.16);
  --ranking-user-border: rgba(96, 165, 250, 0.35);

  /* ========================= LOGIN ========================= */
  --login-bg: radial-gradient(circle at top left, rgba(37, 99, 235, 0.26), transparent 32%), radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.24), transparent 35%), #020617;
  --login-panel-bg: rgba(15, 23, 42, 0.78);
  --login-panel-border: rgba(148, 163, 184, 0.24);
  --login-panel-shadow: var(--shadow-xl);
  --login-hero-bg: linear-gradient(135deg, #1e3a8a, #581c87);
  --login-hero-text: #f8fafc;
  --btn-gold-bg: linear-gradient(135deg, #fbbf24, #f59e0b);
  --btn-gold-text: #020617;
  --btn-gold-border: #fbbf24;
  --btn-gold-hover-bg: linear-gradient(135deg, #f59e0b, #d97706);
  --glow-gold: 0 0 28px rgba(251, 191, 36, 0.24);
  --progress-track-bg: #1e293b;
  --progress-fill-bg: linear-gradient(90deg, #60a5fa, #22d3ee);
  --progress-radius: var(--radius-pill);

  /* ========================= ANIMATION / MOTION ========================= */
  --motion-duration-fast: 120ms;
  --motion-duration-normal: 220ms;
  --motion-duration-slow: 420ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --hover-scale: 1.015;
  --active-scale: 0.985;
  --transition-default: all var(--motion-duration-normal) var(--motion-ease-standard);

  /* ========================= RESPONSIVE ========================= */
  --container-max-width: 1280px;
  --mobile-sidebar-width: 84vw;
  --desktop-sidebar-width: 280px;
  --desktop-sidebar-collapsed-width: 88px;
  --navbar-height: 64px;
  --navbar-height-mobile: 56px;
  --card-min-height: 96px;

  /* ========================= COMPLETE THEME CONTRACT ========================= */
  --color-brand-gold: var(--color-brand-highlight);
  --color-brand-success: var(--success);
  --color-brand-warning: var(--warning);
  --color-brand-danger: var(--danger);
  --anime-energy-blue: var(--color-brand-primary);
  --anime-energy-yellow: var(--color-brand-highlight);
  --anime-speed-orange: var(--warning);
  --anime-power-red: var(--danger);
  --hero-sky-gradient: var(--login-bg);
  --hero-stadium-gradient: var(--login-hero-bg);
  --glow-yellow: var(--glow-gold);
  --glow-orange: var(--glow-gold);
  --glow-red: 0 0 28px rgba(248, 113, 113, 0.22);
  --glow-danger: var(--glow-red);
  --btn-success-bg: var(--success);
  --btn-warning-bg: var(--warning);
  --btn-warning-text: var(--text-inverse);
  --chip-bg: var(--badge-bg);
  --chip-text: var(--badge-text);
  --chip-border: var(--badge-border);
  --chip-hover-bg: var(--btn-ghost-hover-bg);
  --ranking-gold: var(--color-brand-highlight);
  --ranking-silver: var(--border-strong);
  --ranking-bronze: #d97706;
  --team-home-accent: var(--color-brand-primary);
  --team-away-accent: var(--danger);
  --team-draw-accent: var(--color-brand-highlight);
  --achievement-legend: var(--color-brand-highlight);
  --achievement-captain: var(--color-brand-primary);
  --achievement-master: var(--warning);
  --login-hero-accent: var(--color-brand-highlight);
  --login-glow: var(--glow-hover);
  --confetti-primary: var(--color-brand-primary);
  --confetti-secondary: var(--color-brand-highlight);
  --confetti-success: var(--success);
  --loader-primary: var(--color-brand-accent);
  --loader-secondary: var(--color-brand-highlight);
  --motion-duration-hero: 800ms;
  --focus-ring-width: 2px;
  --focus-ring-color: var(--border-focus);
  --focus-ring-offset: 2px;
  --contrast-minimum: 4.5;
  --reduced-motion: reduce;
  --high-contrast-text: #ffffff;
  --high-contrast-bg: #000000;

  /* ========================= ENTERPRISE PREMIUM 2026 SURFACES ========================= */
  --bg-surface-base: #0f172a;
  --bg-surface-muted: #111827;
  --bg-surface-raised: #182235;
  --bg-surface-overlay: rgba(15, 23, 42, 0.9);
  --bg-surface-inset: #020617;
  --bg-elevated-1: #111827;
  --bg-elevated-2: #182235;
  --bg-elevated-3: #1e293b;

  /* ========================= ENTERPRISE PREMIUM 2026 GLOBAL STATES ========================= */
  --state-hover-bg: rgba(96, 165, 250, 0.1);
  --state-active-bg: rgba(96, 165, 250, 0.16);
  --state-selected-bg: rgba(96, 165, 250, 0.2);
  --state-disabled-bg: rgba(100, 116, 139, 0.16);
  --state-focus-bg: rgba(96, 165, 250, 0.12);
  --state-hover-border: rgba(148, 163, 184, 0.32);
  --state-active-border: rgba(96, 165, 250, 0.48);
  --state-selected-border: rgba(96, 165, 250, 0.58);

  /* ========================= ENTERPRISE PREMIUM 2026 NAVIGATION ========================= */
  --nav-item-bg: transparent;
  --nav-item-hover-bg: var(--state-hover-bg);
  --nav-item-active-bg: var(--state-active-bg);
  --nav-item-selected-bg: var(--state-selected-bg);
  --nav-item-text: var(--text-secondary);
  --nav-item-active-text: #93c5fd;
  --nav-item-border: transparent;
  --nav-item-active-border: #60a5fa;
  --nav-icon: #94a3b8;
  --nav-icon-active: #93c5fd;

  /* ========================= ENTERPRISE PREMIUM 2026 BUTTON STATES ========================= */
  --btn-primary-hover-text: #ffffff;
  --btn-primary-hover-border: #60a5fa;
  --btn-primary-active-text: #ffffff;
  --btn-primary-active-border: #93c5fd;
  --btn-primary-disabled-text: #bfdbfe;
  --btn-primary-disabled-border: #1e3a8a;
  --btn-primary-focus-shadow: var(--glow-focus);
  --btn-secondary-hover-text: #f8fafc;
  --btn-secondary-hover-border: rgba(203, 213, 225, 0.48);
  --btn-secondary-active-bg: #475569;
  --btn-secondary-active-text: #f8fafc;
  --btn-secondary-active-border: rgba(203, 213, 225, 0.58);
  --btn-secondary-disabled-bg: #0f172a;
  --btn-secondary-disabled-text: #64748b;
  --btn-secondary-disabled-border: rgba(148, 163, 184, 0.14);
  --btn-secondary-focus-shadow: var(--glow-focus);
  --btn-outline-hover-text: #bfdbfe;
  --btn-outline-hover-border: #93c5fd;
  --btn-outline-active-bg: rgba(96, 165, 250, 0.22);
  --btn-outline-active-text: #dbeafe;
  --btn-outline-active-border: #bfdbfe;
  --btn-outline-disabled-bg: transparent;
  --btn-outline-disabled-text: #64748b;
  --btn-outline-disabled-border: rgba(148, 163, 184, 0.18);
  --btn-outline-focus-shadow: var(--glow-focus);
  --btn-ghost-border: transparent;
  --btn-ghost-hover-text: #f8fafc;
  --btn-ghost-hover-border: transparent;
  --btn-ghost-active-bg: rgba(148, 163, 184, 0.18);
  --btn-ghost-active-text: #f8fafc;
  --btn-ghost-active-border: transparent;
  --btn-ghost-disabled-bg: transparent;
  --btn-ghost-disabled-text: #64748b;
  --btn-ghost-disabled-border: transparent;
  --btn-ghost-focus-shadow: var(--glow-focus);
  --btn-success-text: #052e16;
  --btn-success-border: #22c55e;
  --btn-success-hover-bg: #4ade80;
  --btn-success-hover-text: #052e16;
  --btn-success-hover-border: #86efac;
  --btn-success-active-bg: #16a34a;
  --btn-success-active-text: #f0fdf4;
  --btn-success-active-border: #4ade80;
  --btn-success-disabled-bg: rgba(34, 197, 94, 0.14);
  --btn-success-disabled-text: #64748b;
  --btn-success-disabled-border: rgba(34, 197, 94, 0.2);
  --btn-success-focus-shadow: 0 0 0 4px rgba(34, 197, 94, 0.22);
  --btn-warning-border: #fbbf24;
  --btn-warning-hover-bg: #fde68a;
  --btn-warning-hover-text: #451a03;
  --btn-warning-hover-border: #fde68a;
  --btn-warning-active-bg: #f59e0b;
  --btn-warning-active-text: #020617;
  --btn-warning-active-border: #fbbf24;
  --btn-warning-disabled-bg: rgba(251, 191, 36, 0.14);
  --btn-warning-disabled-text: #64748b;
  --btn-warning-disabled-border: rgba(251, 191, 36, 0.22);
  --btn-warning-focus-shadow: 0 0 0 4px rgba(251, 191, 36, 0.2);
  --btn-danger-border: #f87171;
  --btn-danger-hover-text: #ffffff;
  --btn-danger-hover-border: #fca5a5;
  --btn-danger-active-bg: #b91c1c;
  --btn-danger-active-text: #ffffff;
  --btn-danger-active-border: #f87171;
  --btn-danger-disabled-bg: rgba(248, 113, 113, 0.14);
  --btn-danger-disabled-text: #64748b;
  --btn-danger-disabled-border: rgba(248, 113, 113, 0.22);
  --btn-danger-focus-shadow: 0 0 0 4px rgba(248, 113, 113, 0.2);
  --btn-neutral-bg: #111827;
  --btn-neutral-text: #cbd5e1;
  --btn-neutral-border: rgba(148, 163, 184, 0.24);
  --btn-neutral-hover-bg: #1e293b;
  --btn-neutral-hover-text: #f8fafc;
  --btn-neutral-hover-border: rgba(148, 163, 184, 0.36);
  --btn-neutral-active-bg: #334155;
  --btn-neutral-active-text: #f8fafc;
  --btn-neutral-active-border: rgba(203, 213, 225, 0.48);
  --btn-neutral-disabled-bg: #0f172a;
  --btn-neutral-disabled-text: #64748b;
  --btn-neutral-disabled-border: rgba(148, 163, 184, 0.14);
  --btn-neutral-focus-shadow: var(--glow-focus);

  /* ========================= ENTERPRISE PREMIUM 2026 FORMS ========================= */
  --label-text: #cbd5e1;
  --label-required: #f87171;
  --help-text: #94a3b8;
  --validation-error-text: #fecaca;
  --validation-success-text: #86efac;
  --input-icon: #94a3b8;
  --input-addon-bg: #111827;
  --input-addon-border: rgba(148, 163, 184, 0.24);
  --input-readonly-bg: #0f172a;
  --input-readonly-text: #94a3b8;

  /* ========================= ENTERPRISE PREMIUM 2026 TABLES ========================= */
  --table-sort-icon: #94a3b8;
  --table-filter-bg: #0f172a;
  --table-filter-border: rgba(148, 163, 184, 0.28);
  --table-sticky-header-bg: rgba(15, 23, 42, 0.94);
  --table-empty-text: #94a3b8;
  --table-group-header-bg: #1e293b;
  --table-summary-row-bg: rgba(96, 165, 250, 0.12);

  /* ========================= ENTERPRISE PREMIUM 2026 COMPONENTS ========================= */
  --tab-bg: transparent;
  --tab-text: #cbd5e1;
  --tab-hover-bg: var(--state-hover-bg);
  --tab-active-bg: rgba(96, 165, 250, 0.14);
  --tab-active-text: #93c5fd;
  --tab-indicator: #60a5fa;
  --pagination-bg: #111827;
  --pagination-text: #cbd5e1;
  --pagination-hover-bg: var(--state-hover-bg);
  --pagination-active-bg: #2563eb;
  --pagination-active-text: #ffffff;
  --pagination-disabled-text: #64748b;
  --accordion-header-bg: #111827;
  --accordion-header-text: #f8fafc;
  --accordion-body-bg: #0f172a;
  --accordion-border: rgba(148, 163, 184, 0.18);
  --accordion-icon: #94a3b8;
  --toast-bg: #182235;
  --toast-text: #f8fafc;
  --toast-border: rgba(148, 163, 184, 0.24);

  /* ========================= ENTERPRISE PREMIUM 2026 FEEDBACK ========================= */
  --skeleton-bg: #1e293b;
  --skeleton-highlight: #334155;
  --empty-state-bg: #111827;
  --empty-state-icon: #60a5fa;
  --empty-state-title: #f8fafc;
  --empty-state-text: #94a3b8;
  --avatar-bg: #1e293b;
  --avatar-border: rgba(148, 163, 184, 0.28);
  --avatar-ring: 0 0 0 4px rgba(96, 165, 250, 0.18);
  --profile-stat-bg: #111827;
  --profile-stat-border: rgba(148, 163, 184, 0.2);
  --notification-bg: #111827;
  --notification-border: rgba(148, 163, 184, 0.2);
  --notification-unread-bg: rgba(96, 165, 250, 0.14);
  --notification-dot: #60a5fa;
  --scrollbar-track: #0f172a;
  --scrollbar-thumb: rgba(148, 163, 184, 0.34);
  --scrollbar-thumb-hover: rgba(203, 213, 225, 0.48);

  /* ========================= ENTERPRISE PREMIUM 2026 MOTION ========================= */
  --motion-duration-instant: 0ms;
  --motion-duration-score-update: 240ms;
  --motion-duration-live-update: 460ms;
  --motion-duration-achievement: 660ms;
  --motion-duration-ranking-change: 380ms;
  --motion-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --motion-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* ========================= SPORTS PREMIUM EXTENDED CONTRACT ========================= */
  --team-neutral-accent: var(--color-brand-accent);
  --team-logo-bg: var(--bg-surface-raised);
  --team-logo-border: var(--border-light);
  --team-logo-shadow: var(--shadow-sm);
  --team-name-text: var(--text-primary);
  --team-meta-text: var(--text-muted);
  --live-pulse-color: rgba(248, 113, 113, 0.36);
  --live-dot-bg: var(--danger);
  --live-border: var(--alert-danger-border);
  --live-score-glow: 0 0 0 4px rgba(248, 113, 113, 0.14);
  --live-card-bg: var(--danger-bg);
  --live-card-border: var(--alert-danger-border);
  --live-badge-bg: var(--match-live-bg);
  --live-badge-text: var(--match-live-text);
  --prediction-input-bg: var(--input-bg);
  --prediction-input-border: var(--input-border);
  --prediction-input-focus: var(--input-focus-shadow);
  --prediction-correct-bg: var(--success-bg);
  --prediction-correct-border: var(--alert-success-border);
  --prediction-correct-text: var(--alert-success-text);
  --prediction-wrong-bg: var(--danger-bg);
  --prediction-wrong-border: var(--alert-danger-border);
  --prediction-wrong-text: var(--alert-danger-text);
  --prediction-pending-bg: var(--warning-bg);
  --prediction-pending-border: var(--alert-warning-border);
  --prediction-pending-text: var(--alert-warning-text);
  --badge-live-bg: var(--live-badge-bg);
  --badge-live-text: var(--live-badge-text);
  --badge-prediction-bg: var(--prediction-bg);
  --badge-prediction-text: var(--prediction-text);
  --badge-ranking-bg: var(--ranking-user-bg);
  --badge-ranking-text: var(--text-link);
  --badge-achievement-bg: var(--ranking-top-bg);
  --badge-achievement-text: var(--alert-warning-text);
  --achievement-elite: var(--color-brand-accent);
  --achievement-rookie: var(--text-muted);
  --stat-positive: var(--success);
  --stat-negative: var(--danger);
  --stat-neutral: var(--text-muted);
  --stat-highlight: var(--color-brand-highlight);
  --stat-card-bg: var(--bg-surface-raised);
  --stat-card-border: var(--border-light);
  --match-card-mobile-height: 132px;
  --match-card-desktop-height: 156px;
  --ranking-mobile-layout: stacked;
  --dashboard-mobile-spacing: var(--space-4);
  /* ========================= GAME EXPERIENCE ========================= */
  --game-hero-bg: var(--hero-stadium-gradient);
  --game-hero-border: var(--border-strong);
  --game-hero-shadow: var(--shadow-xl);
  --game-hero-title: var(--text-primary);
  --game-hero-subtitle: var(--text-secondary);
  --player-card-bg: var(--bg-surface-1);
  --player-card-border: var(--border-light);
  --player-card-shadow: var(--shadow-md);
  --player-level-bg: var(--btn-gold-bg);
  --player-level-text: var(--btn-gold-text);
  --match-card-bg: var(--bg-card);
  --match-card-border: var(--border-light);
  --match-card-shadow: var(--shadow-md);
  --match-card-hover-shadow: var(--shadow-lg);
  --match-header-bg: var(--bg-surface-2);
  --match-date-chip-bg: var(--chip-bg);
  --match-date-chip-text: var(--chip-text);
  --match-status-bg: var(--info-bg);
  --match-status-text: var(--info);
  --score-editor-bg: var(--bg-surface-inset);
  --score-editor-border: var(--border-normal);
  --score-editor-shadow: var(--shadow-sm);
  --score-input-bg: var(--input-bg);
  --score-input-text: var(--input-text);
  --score-input-border: var(--input-border);
  --score-input-focus: var(--border-focus);
  --prediction-available-bg: var(--info-bg);
  --prediction-available-text: var(--info);
  --prediction-saved-bg: var(--success-bg);
  --prediction-saved-text: var(--success);
  --prediction-closed-bg: var(--warning-bg);
  --prediction-closed-text: var(--warning);
  --prediction-correct-bg: var(--success-bg);
  --prediction-correct-text: var(--success);
  --prediction-wrong-bg: var(--danger-bg);
  --prediction-wrong-text: var(--danger);
  --ranking-podium-bg: var(--bg-card);
  --ranking-podium-border: var(--border-strong);
  --ranking-first-bg: var(--btn-gold-bg);
  --ranking-second-bg: var(--bg-surface-2);
  --ranking-third-bg: var(--warning-bg);
  --ranking-current-user-bg: var(--ranking-user-bg);
  --achievement-bg: var(--success-bg);
  --achievement-border: var(--border-light);
  --achievement-icon-bg: var(--btn-gold-bg);
  --achievement-title: var(--text-primary);
  --achievement-text: var(--text-secondary);
  --game-mode-bg: var(--bg-card);
  --game-mode-border: var(--border-strong);
  --game-mode-shadow: var(--shadow-lg);
  --game-mode-cta-bg: var(--btn-primary-bg);
  --game-mode-cta-text: var(--btn-primary-text);
}