/* Theme: Sport Light Premium v2 Goal: brighter, more emotional, premium sports-light UI while preserving the full 479-token contract. Use: */ :root[data-theme="sport-light-premium"] { color-scheme: light; /* ========================= BRAND ========================= */ --color-brand-primary: #0b5cff; --color-brand-secondary: #00a86b; --color-brand-accent: #00b8ff; --color-brand-highlight: #ffb703; /* ========================= BACKGROUNDS ========================= */ --bg-body: radial-gradient(circle at 8% 0%, rgba(0, 184, 255, 0.22), transparent 32%), radial-gradient(circle at 92% 8%, rgba(255, 183, 3, 0.20), transparent 30%), radial-gradient(circle at 50% 110%, rgba(22, 163, 74, 0.12), transparent 34%), linear-gradient(180deg, #eaf7ff 0%, #f7fbff 42%, #ffffff 100%); --bg-page: #f5fbff; --bg-surface-1: #ffffff; --bg-surface-2: #eaf6ff; --bg-surface-3: #cfeaff; --bg-navbar: rgba(255, 255, 255, 0.78); --bg-sidebar: linear-gradient(180deg, #ffffff 0%, #f0f8ff 52%, #eaf6ff 100%); --bg-footer: rgba(255, 255, 255, 0.88); --bg-card: rgba(255, 255, 255, 0.96); --bg-modal: #ffffff; --bg-dropdown: #ffffff; --bg-tooltip: #061a40; /* ========================= TEXT ========================= */ --text-primary: #061a40; --text-secondary: #1d3557; --text-muted: #607794; --text-disabled: #9ab0c8; --text-inverse: #ffffff; --text-link: #0b5cff; --text-link-hover: #073b9a; /* ========================= BORDERS ========================= */ --border-light: rgba(113, 160, 205, 0.30); --border-normal: rgba(55, 125, 201, 0.38); --border-strong: rgba(11, 92, 255, 0.55); --border-focus: #0b5cff; --border-width-normal: 1px; /* ========================= STATUS ========================= */ --success: #16a34a; --warning: #ffb703; --danger: #e11d48; --info: #00b8ff; --success-bg: #dcfce7; --warning-bg: #fff3c4; --danger-bg: #ffe4e6; --info-bg: #dff7ff; /* ========================= 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 3px 10px rgba(6, 26, 64, 0.08); --shadow-md: 0 16px 42px rgba(6, 26, 64, 0.12), 0 2px 8px rgba(11, 92, 255, 0.06); --shadow-lg: 0 28px 68px rgba(6, 26, 64, 0.17), 0 0 34px rgba(0, 184, 255, 0.10); --shadow-xl: 0 44px 110px rgba(6, 26, 64, 0.22), 0 0 60px rgba(11, 92, 255, 0.12); --glass-bg: rgba(255, 255, 255, 0.68); --glass-border: rgba(255, 255, 255, 0.70); --glass-blur: 22px; --glow-primary: 0 0 0 rgba(29, 78, 216, 0); --glow-hover: 0 0 36px rgba(0, 184, 255, 0.24); --glow-focus: 0 0 0 4px rgba(11, 92, 255, 0.22); /* ========================= NAVBAR / SIDEBAR ========================= */ --navbar-bg: rgba(247, 252, 255, 0.96); --navbar-text: #1d3557; --navbar-text-active: #0b5cff; --navbar-item-hover-bg: rgba(0, 184, 255, 0.12); --navbar-border: rgba(11, 92, 255, 0.28); --navbar-backdrop-blur: 22px; --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #eff8ff 54%, #e6f4ff 100%); --sidebar-text: #1d3557; --sidebar-icon: #607794; --sidebar-item-hover-bg: rgba(0, 184, 255, 0.12); --sidebar-item-active-bg: linear-gradient(135deg, rgba(11, 92, 255, 0.14), rgba(0, 184, 255, 0.20)); --sidebar-item-active-text: #0b5cff; --sidebar-border: rgba(11, 92, 255, 0.12); /* ========================= BUTTONS ========================= */ --btn-primary-bg: linear-gradient(135deg, #0b5cff 0%, #00a3ff 100%); --btn-primary-text: #ffffff; --btn-primary-border: rgba(11, 92, 255, 0.75); --btn-primary-hover-bg: linear-gradient(135deg, #074bd6 0%, #0087d8 100%); --btn-primary-active-bg: #073b9a; --btn-primary-disabled-bg: #9dccff; --btn-secondary-bg: rgba(255, 255, 255, 0.92); --btn-secondary-text: #061a40; --btn-secondary-border: rgba(11, 92, 255, 0.22); --btn-secondary-hover-bg: #e8f5ff; --btn-outline-bg: transparent; --btn-outline-text: #0b5cff; --btn-outline-border: rgba(11, 92, 255, 0.48); --btn-outline-hover-bg: rgba(11, 92, 255, 0.08); --btn-ghost-bg: transparent; --btn-ghost-text: #1d3557; --btn-ghost-hover-bg: rgba(0, 184, 255, 0.10); --btn-danger-bg: #e11d48; --btn-danger-text: #ffffff; --btn-danger-hover-bg: #be123c; /* ========================= INPUTS ========================= */ --input-bg: rgba(255, 255, 255, 0.96); --input-text: #061a40; --input-placeholder: #8196ad; --input-border: rgba(55, 125, 201, 0.30); --input-border-hover: rgba(11, 92, 255, 0.46); --input-border-focus: #0b5cff; --input-focus-shadow: 0 0 0 4px rgba(11, 92, 255, 0.16); --input-disabled-bg: #eef6ff; --input-disabled-text: #94a3b8; --input-error-border: #dc2626; --input-success-border: #16a34a; /* ========================= TABLES ========================= */ --table-bg: rgba(255, 255, 255, 0.96); --table-header-bg: linear-gradient(180deg, #e7f4ff 0%, #dceeff 100%); --table-header-text: #073b9a; --table-row-bg: #ffffff; --table-row-alt-bg: #f5fbff; --table-row-hover-bg: #e8f5ff; --table-row-selected-bg: #d7ecff; --table-border: rgba(113, 160, 205, 0.28); --table-cell-text: #1d3557; /* ========================= CARDS ========================= */ --card-bg: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(247,251,255,0.96) 100%); --card-border: rgba(11, 92, 255, 0.16); --card-title: #061a40; --card-subtitle: #607794; --card-shadow: 0 18px 46px rgba(6, 26, 64, 0.12), inset 0 1px 0 rgba(255,255,255,0.9); --card-hover-shadow: 0 30px 78px rgba(6, 26, 64, 0.18), 0 0 34px rgba(0, 184, 255, 0.16); --card-hover-transform: translateY(-5px); /* ========================= MODALS / DROPDOWNS / TOOLTIPS ========================= */ --modal-overlay-bg: rgba(15, 23, 42, 0.42); --modal-bg: #ffffff; --modal-header-bg: #ffffff; --modal-footer-bg: #f8fafc; --modal-border: #d8e7f7; --modal-shadow: var(--shadow-xl); --dropdown-bg: #ffffff; --dropdown-text: #334155; --dropdown-hover-bg: #eaf3ff; --dropdown-selected-bg: #dbeafe; --dropdown-border: #e2e8f0; --dropdown-shadow: var(--shadow-lg); --tooltip-bg: #0f172a; --tooltip-text: #ffffff; --tooltip-shadow: var(--shadow-md); /* ========================= BADGES / ALERTS ========================= */ --badge-bg: linear-gradient(135deg, rgba(11, 92, 255, 0.10), rgba(0, 184, 255, 0.14)); --badge-text: #0b5cff; --badge-border: rgba(11, 92, 255, 0.24); --alert-success-bg: #dcfce7; --alert-success-text: #166534; --alert-success-border: #86efac; --alert-warning-bg: #fff4c7; --alert-warning-text: #8a5c00; --alert-warning-border: #f6c453; --alert-danger-bg: #fee2e2; --alert-danger-text: #991b1b; --alert-danger-border: #fca5a5; --alert-info-bg: #dff4ff; --alert-info-text: #075985; --alert-info-border: #7dd3fc; /* ========================= SPORTS COMPONENTS ========================= */ --match-card-bg: linear-gradient(145deg, rgba(255,255,255,0.99), rgba(234,246,255,0.96)), radial-gradient(circle at top right, rgba(0,184,255,0.14), transparent 44%); --match-card-border: rgba(11, 92, 255, 0.18); --match-card-hover-bg: linear-gradient(145deg, #ffffff, #e8f5ff); --match-live-bg: #ffe4e6; --match-live-text: #be123c; --match-live-glow: 0 0 28px rgba(225, 29, 72, 0.24); --score-leading: #16a34a; --score-trailing: #e11d48; --score-draw: #5b6f8c; --prediction-bg: linear-gradient(135deg, #fff7d6, #fff0b3); --prediction-border: #f7c948; --prediction-text: #7a4a00; --ranking-top-bg: linear-gradient(135deg, #fff6cc, #ffe48a); --ranking-top-border: #ffc928; --ranking-user-bg: linear-gradient(135deg, #dbeafe, #c8f2ff); --ranking-user-border: #38bdf8; /* ========================= LOGIN ========================= */ --login-bg: radial-gradient(circle at 8% 0%, rgba(0, 184, 255, 0.22), transparent 34%), radial-gradient(circle at 90% 12%, rgba(255, 183, 3, 0.24), transparent 30%), linear-gradient(180deg, #eaf7ff 0%, #ffffff 100%); --login-panel-bg: rgba(255, 255, 255, 0.78); --login-panel-border: rgba(255, 255, 255, 0.74); --login-panel-shadow: 0 44px 110px rgba(6, 26, 64, 0.22), inset 0 1px 0 rgba(255,255,255,0.9); --login-hero-bg: linear-gradient(135deg, #0b5cff 0%, #00b8ff 52%, #ffb703 100%); --login-hero-text: #ffffff; --btn-gold-bg: linear-gradient(135deg, #ffcf33 0%, #ffb703 55%, #fb8500 100%); --btn-gold-text: #061a40; --btn-gold-border: rgba(255, 183, 3, 0.85); --btn-gold-hover-bg: linear-gradient(135deg, #ffc107 0%, #f59e0b 100%); --glow-gold: 0 0 34px rgba(255, 183, 3, 0.34); --progress-track-bg: #dceeff; --progress-fill-bg: linear-gradient(90deg, #0b5cff, #00b8ff, #ffb703); --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: #ffc928; --color-brand-success: #16a34a; --color-brand-warning: #ffb703; --color-brand-danger: #e11d48; --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: 0 0 32px rgba(255, 207, 51, 0.30); --glow-orange: 0 0 30px rgba(251, 133, 0, 0.26); --glow-red: 0 0 30px rgba(225, 29, 72, 0.20); --glow-danger: 0 0 30px rgba(225, 29, 72, 0.22); --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: #b45309; --team-home-accent: #0b5cff; --team-away-accent: #e11d48; --team-draw-accent: #ffb703; --achievement-legend: #ffb703; --achievement-captain: #0b5cff; --achievement-master: #fb8500; --login-hero-accent: #ffcf33; --login-glow: 0 0 60px rgba(0, 184, 255, 0.22); --confetti-primary: var(--color-brand-primary); --confetti-secondary: var(--color-brand-highlight); --confetti-success: var(--success); --loader-primary: #0b5cff; --loader-secondary: #ffb703; --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: #0f172a; --high-contrast-bg: #ffffff; /* ========================= ENTERPRISE PREMIUM 2026 SURFACES ========================= */ --bg-surface-base: #f5fbff; --bg-surface-muted: #eaf6ff; --bg-surface-raised: rgba(255, 255, 255, 0.98); --bg-surface-overlay: rgba(255, 255, 255, 0.78); --bg-surface-inset: #eaf6ff; --bg-elevated-1: #ffffff; --bg-elevated-2: #f7fbff; --bg-elevated-3: #eaf6ff; /* ========================= ENTERPRISE PREMIUM 2026 STATES ========================= */ --state-hover-bg: rgba(0, 184, 255, 0.10); --state-active-bg: #d7ecff; --state-selected-bg: linear-gradient(135deg, #dbeafe, #c8f2ff); --state-disabled-bg: #edf6ff; --state-focus-bg: #e8f5ff; --state-hover-border: rgba(0, 184, 255, 0.36); --state-active-border: #38bdf8; --state-selected-border: #0b5cff; /* ========================= ENTERPRISE PREMIUM 2026 NAVIGATION ========================= */ --nav-item-bg: rgba(255, 255, 255, 0.68); --nav-item-hover-bg: rgba(0, 184, 255, 0.14); --nav-item-active-bg: linear-gradient(135deg, rgba(11, 92, 255, 0.24), rgba(0, 184, 255, 0.20)); --nav-item-selected-bg: linear-gradient(135deg, rgba(11, 92, 255, 0.24), rgba(0, 184, 255, 0.20)); --nav-item-text: #173153; --nav-item-active-text: #053EBD; --nav-item-border: rgba(11, 92, 255, 0.14); --nav-item-active-border: rgba(11, 92, 255, 0.52); --nav-icon: #385F82; --nav-icon-active: #053EBD; /* ========================= ENTERPRISE PREMIUM 2026 BUTTON STATES ========================= */ --btn-primary-hover-text: #ffffff; --btn-primary-hover-border: #1d4ed8; --btn-primary-active-text: #ffffff; --btn-primary-active-border: #1e40af; --btn-primary-disabled-text: #ffffff; --btn-primary-disabled-border: #93c5fd; --btn-primary-focus-shadow: var(--glow-focus); --btn-secondary-hover-text: #0f172a; --btn-secondary-hover-border: #94a3b8; --btn-secondary-active-bg: #cbd5e1; --btn-secondary-active-text: #0f172a; --btn-secondary-active-border: #94a3b8; --btn-secondary-disabled-bg: #f8fafc; --btn-secondary-disabled-text: #94a3b8; --btn-secondary-disabled-border: #e2e8f0; --btn-secondary-focus-shadow: 0 0 0 4px rgba(100, 116, 139, 0.14); --btn-outline-hover-text: #1d4ed8; --btn-outline-hover-border: #1d4ed8; --btn-outline-active-bg: #dbeafe; --btn-outline-active-text: #1e40af; --btn-outline-active-border: #1e40af; --btn-outline-disabled-bg: transparent; --btn-outline-disabled-text: #94a3b8; --btn-outline-disabled-border: #cbd5e1; --btn-outline-focus-shadow: var(--glow-focus); --btn-ghost-border: transparent; --btn-ghost-hover-text: #0f172a; --btn-ghost-hover-border: transparent; --btn-ghost-active-bg: #e2e8f0; --btn-ghost-active-text: #0f172a; --btn-ghost-active-border: transparent; --btn-ghost-disabled-bg: transparent; --btn-ghost-disabled-text: #94a3b8; --btn-ghost-disabled-border: transparent; --btn-ghost-focus-shadow: 0 0 0 4px rgba(100, 116, 139, 0.14); --btn-success-text: #ffffff; --btn-success-border: #16a34a; --btn-success-hover-bg: #15803d; --btn-success-hover-text: #ffffff; --btn-success-hover-border: #15803d; --btn-success-active-bg: #166534; --btn-success-active-text: #ffffff; --btn-success-active-border: #166534; --btn-success-disabled-bg: #86efac; --btn-success-disabled-text: #ffffff; --btn-success-disabled-border: #86efac; --btn-success-focus-shadow: 0 0 0 4px rgba(22, 163, 74, 0.16); --btn-warning-border: #f59e0b; --btn-warning-hover-bg: #d97706; --btn-warning-hover-text: #ffffff; --btn-warning-hover-border: #d97706; --btn-warning-active-bg: #b45309; --btn-warning-active-text: #ffffff; --btn-warning-active-border: #b45309; --btn-warning-disabled-bg: #fcd34d; --btn-warning-disabled-text: #92400e; --btn-warning-disabled-border: #fcd34d; --btn-warning-focus-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18); --btn-danger-border: #dc2626; --btn-danger-hover-text: #ffffff; --btn-danger-hover-border: #b91c1c; --btn-danger-active-bg: #991b1b; --btn-danger-active-text: #ffffff; --btn-danger-active-border: #991b1b; --btn-danger-disabled-bg: #fca5a5; --btn-danger-disabled-text: #ffffff; --btn-danger-disabled-border: #fca5a5; --btn-danger-focus-shadow: 0 0 0 4px rgba(220, 38, 38, 0.16); --btn-neutral-bg: var(--btn-secondary-bg); --btn-neutral-text: var(--btn-secondary-text); --btn-neutral-border: var(--btn-secondary-border); --btn-neutral-hover-bg: var(--btn-secondary-hover-bg); --btn-neutral-hover-text: var(--btn-secondary-hover-text); --btn-neutral-hover-border: var(--btn-secondary-hover-border); --btn-neutral-active-bg: var(--btn-secondary-active-bg); --btn-neutral-active-text: var(--btn-secondary-active-text); --btn-neutral-active-border: var(--btn-secondary-active-border); --btn-neutral-disabled-bg: var(--btn-secondary-disabled-bg); --btn-neutral-disabled-text: var(--btn-secondary-disabled-text); --btn-neutral-disabled-border: var(--btn-secondary-disabled-border); --btn-neutral-focus-shadow: var(--btn-secondary-focus-shadow); /* ========================= ENTERPRISE PREMIUM 2026 FORMS ========================= */ --label-text: var(--text-secondary); --label-required: var(--danger); --help-text: var(--text-muted); --validation-error-text: #991b1b; --validation-success-text: #166534; --input-icon: var(--text-muted); --input-addon-bg: var(--bg-surface-2); --input-addon-border: var(--border-normal); --input-readonly-bg: var(--bg-surface-2); --input-readonly-text: var(--text-secondary); /* ========================= ENTERPRISE PREMIUM 2026 TABLES ========================= */ --table-sort-icon: var(--text-muted); --table-filter-bg: var(--bg-surface-1); --table-filter-border: var(--border-normal); --table-sticky-header-bg: rgba(248, 250, 252, 0.92); --table-empty-text: var(--text-muted); --table-group-header-bg: var(--bg-surface-2); --table-summary-row-bg: #eff6ff; /* ========================= ENTERPRISE PREMIUM 2026 COMPONENTS ========================= */ --tab-bg: rgba(255,255,255,0.72); --tab-text: #1d3557; --tab-hover-bg: rgba(0, 184, 255, 0.10); --tab-active-bg: linear-gradient(135deg, #0b5cff, #00b8ff); --tab-active-text: #ffffff; --tab-indicator: #ffb703; --pagination-bg: rgba(255,255,255,0.92); --pagination-text: var(--text-secondary); --pagination-hover-bg: #e8f5ff; --pagination-active-bg: linear-gradient(135deg, #0b5cff, #00b8ff); --pagination-active-text: #ffffff; --pagination-disabled-text: var(--text-disabled); --accordion-header-bg: #ffffff; --accordion-header-text: var(--text-primary); --accordion-body-bg: #f8fbff; --accordion-border: var(--border-light); --accordion-icon: var(--text-muted); --toast-bg: rgba(255,255,255,0.92); --toast-text: var(--text-primary); --toast-border: var(--border-light); --skeleton-bg: #dceeff; --skeleton-highlight: #f7fbff; --empty-state-bg: linear-gradient(135deg, #ffffff, #eaf6ff); --empty-state-icon: #38bdf8; --empty-state-title: #061a40; --empty-state-text: #607794; --avatar-bg: linear-gradient(135deg, #e8f5ff, #d7ecff); --avatar-border: rgba(11, 92, 255, 0.18); --avatar-ring: 0 0 0 4px rgba(0, 184, 255, 0.18); --profile-stat-bg: var(--bg-surface-1); --profile-stat-border: var(--border-light); --notification-bg: rgba(255,255,255,0.96); --notification-border: rgba(11, 92, 255, 0.14); --notification-unread-bg: linear-gradient(135deg, #e8f5ff, #dbeafe); --notification-dot: #e11d48; --scrollbar-track: #eaf6ff; --scrollbar-thumb: #9dccff; --scrollbar-thumb-hover: #0b5cff; /* ========================= ENTERPRISE PREMIUM 2026 MOTION ========================= */ --motion-duration-instant: 0ms; --motion-duration-score-update: 220ms; --motion-duration-live-update: 420ms; --motion-duration-achievement: 620ms; --motion-duration-ranking-change: 360ms; --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: #00a86b; --team-logo-bg: #ffffff; --team-logo-border: rgba(11, 92, 255, 0.18); --team-logo-shadow: 0 10px 22px rgba(6, 26, 64, 0.12); --team-name-text: #061a40; --team-meta-text: #607794; --live-pulse-color: rgba(225, 29, 72, 0.26); --live-dot-bg: #e11d48; --live-border: #fda4af; --live-score-glow: 0 0 26px rgba(225, 29, 72, 0.24); --live-card-bg: linear-gradient(135deg, #fff1f2, #fff7ed); --live-card-border: #fda4af; --live-badge-bg: #ffe4e6; --live-badge-text: #be123c; --prediction-input-bg: #ffffff; --prediction-input-border: rgba(11, 92, 255, 0.26); --prediction-input-focus: 0 0 0 4px rgba(0, 184, 255, 0.18); --prediction-correct-bg: #dcfce7; --prediction-correct-border: #86efac; --prediction-correct-text: #166534; --prediction-wrong-bg: #ffe4e6; --prediction-wrong-border: #fda4af; --prediction-wrong-text: #be123c; --prediction-pending-bg: #fff7d6; --prediction-pending-border: #ffc928; --prediction-pending-text: #7a4a00; --badge-live-bg: #ffe4e6; --badge-live-text: #be123c; --badge-prediction-bg: #fff7d6; --badge-prediction-text: #7a4a00; --badge-ranking-bg: #dbeafe; --badge-ranking-text: #0b5cff; --badge-achievement-bg: #fff3c4; --badge-achievement-text: #7a4a00; --achievement-elite: #00b8ff; --achievement-rookie: #607794; --stat-positive: #16a34a; --stat-negative: #e11d48; --stat-neutral: #607794; --stat-highlight: #ffb703; --stat-card-bg: linear-gradient(180deg, #ffffff, #f5fbff); --stat-card-border: rgba(11, 92, 255, 0.14); --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); }