/* EuroLeague design tokens — single source of truth for color/spacing/typography/shape. Scoped for a future dark theme: add a [data-bs-theme="dark"] block later without touching consumers. */ :root, [data-bs-theme="light"] { /* ---- Surfaces & lines ---- */ --el-bg: #eeeeee; --el-surface: #ffffff; --el-surface-2: #f7f8fa; --el-surface-3: #fafbfc; --el-line: #e5e7eb; --el-line-soft: #f0f1f3; --el-stage: #14171a; --el-stage-2: #1b1f24; /* ---- Ink ---- */ --el-ink: #14171a; --el-ink-2: #3d434b; --el-muted: #9199a3; --el-muted-2: #b6bcc4; --el-ink-on-dark: #ffffff; --el-muted-on-dark: #9aa0a8; /* ---- Brand ---- */ --el-green: #17794F; --el-green-strong: #1e7a34; --el-green-strong-hover: #16602a; --el-green-soft: #f3f8f0; --el-lime: #17794F; --el-gold: #c58a1f; --el-gold-2: #d4a017; --el-live: #d9364f; --el-lega-2k: #2b6cb0; --el-lega-dl: #c0392b; --el-gradient-brand: #17794f; --el-gradient-bar: #17794f; /* "Stage" background: dark panel with a soft gold glow, from the Sorteggio live-draw page. */ --el-gradient-stage: radial-gradient(560px 320px at 50% 6%, rgba(197, 138, 31, .16) 0%, transparent 62%), linear-gradient(180deg, var(--el-stage-2) 0%, var(--el-stage) 100%); /* ---- Typography ---- */ --el-font-display: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --el-font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* ---- Shape & elevation ---- */ --el-radius-sm: 4px; --el-radius: 4px; --el-radius-lg: 8px; --el-radius-pill: 999px; --el-shadow-sm: 0 4px 10px rgba(20, 23, 26, .08); --el-shadow-md: 0 8px 24px rgba(20, 23, 26, .08); --el-shadow-lg: 0 10px 30px rgba(20, 23, 26, .14); /* ---- Spacing (4px scale) ---- */ --el-sp-1: 4px; --el-sp-2: 8px; --el-sp-3: 12px; --el-sp-4: 16px; --el-sp-5: 20px; --el-sp-6: 24px; --el-sp-8: 32px; /* ---- Bootstrap 5.3 bridge: component-level vars still need overrides in components.css, these globals cover body/link/border defaults so plain BS markup already looks branded. ---- */ --bs-body-bg: var(--el-bg); --bs-body-color: var(--el-ink); --bs-body-font-family: var(--el-font-body); --bs-emphasis-color: var(--el-ink); --bs-secondary-color: var(--el-ink-2); --bs-tertiary-color: var(--el-muted); --bs-border-color: var(--el-line); --bs-border-radius: var(--el-radius-sm); --bs-border-radius-lg: var(--el-radius); --bs-border-radius-xl: var(--el-radius-lg); --bs-border-radius-pill: var(--el-radius-pill); --bs-link-color: var(--el-green-strong); --bs-link-color-rgb: 30, 122, 52; --bs-link-hover-color: var(--el-green-strong-hover); --bs-primary: var(--el-green); --bs-primary-rgb: 40, 167, 69; --bs-success: var(--el-green); --bs-success-rgb: 40, 167, 69; --bs-danger: var(--el-live); --bs-danger-rgb: 217, 54, 79; --bs-warning: var(--el-gold-2); --bs-warning-rgb: 212, 160, 23; --bs-info: var(--el-lega-2k); --bs-info-rgb: 43, 108, 176; --bs-heading-font-family: var(--el-font-display); } /* ---- Dark theme ---- Redefines only the --el-* tokens; every consumer (components, Bootstrap bridge) follows automatically. Brand hues are kept, links/greens are brightened for contrast on dark surfaces. Applied when . */ [data-bs-theme="dark"] { /* Surfaces & lines */ --el-bg: #0f1215; --el-surface: #181c20; --el-surface-2: #1f242a; --el-surface-3: #242a31; --el-line: #2c333b; --el-line-soft: #232930; /* --el-stage / --el-stage-2 stay dark by design (shared with Sorteggio/TV) */ /* Ink */ --el-ink: #e8eaed; --el-ink-2: #c2c7ce; --el-muted: #8b929b; --el-muted-2: #6b727a; /* --el-ink-on-dark / --el-muted-on-dark already target dark surfaces */ /* Brand — brightened greens for links/accents on dark */ --el-green: #2fbd52; --el-green-strong: #3fbf5f; --el-green-strong-hover: #63d982; --el-green-soft: rgba(47, 189, 82, .14); --el-lime: #2fbd52; --el-gold: #d4a017; --el-gold-2: #e0b23a; /* Elevation — deeper shadows on dark */ --el-shadow-sm: 0 4px 10px rgba(0, 0, 0, .40); --el-shadow-md: 0 8px 24px rgba(0, 0, 0, .45); --el-shadow-lg: 0 10px 30px rgba(0, 0, 0, .55); /* Bootstrap bridge literals that don't derive from --el-* via var() */ --bs-link-color-rgb: 63, 191, 95; --bs-primary-rgb: 47, 189, 82; --bs-success-rgb: 47, 189, 82; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }