/** * ============================================= * LEADERBOARD THEME VARIABLES * ============================================= * * Centralized CSS Variables for theming. * To change theme colors, only modify this file. * * Usage: Include this file BEFORE theme-dark.css or theme-light.css * * Convention: * - Use data-theme attribute on element * - [data-theme="dark"] for dark theme * - [data-theme="light"] for light theme */ /* ============================================= BRAND COLORS (Shared across themes) ============================================= */ :root { /* Gold accent colors - light soft gold */ --gold: #D2B976; --gold-light: #E0CC8A; --gold-dark: #B09840; --gold-glow: rgba(210, 185, 118, 0.35); /* Font family */ --font-family: 'Poppins', sans-serif; /* Transitions */ --transition-fast: 0.3s ease; --transition-medium: 0.4s ease; --transition-slow: 0.5s ease; /* Border radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 50px; --radius-full: 50%; } /* ============================================= DARK THEME (Default) - Deep Black & Light Gold ============================================= */ [data-theme="dark"] { /* Backgrounds - true leaderboard black */ --bg-primary: #030303; --bg-secondary: #0a0a09; --bg-card: #080807; --bg-gray: #111110; --bg-input: #080807; /* Text colors - warm cream tones */ --text-primary: #efe8d8; --text-secondary: #b5aa96; --text-muted: #706758; /* Border colors - visible warm gold-brown edges */ --border-color: #2a2318; --border-light: #362d20; /* Shadow colors */ --shadow-color: rgba(210, 185, 118, 0.15); --shadow-dark: rgba(0, 0, 0, 0.7); /* Table row colors */ --row-hover: rgba(210, 185, 118, 0.08); --row-bg: rgba(210, 185, 118, 0.02); --row-alt: rgba(210, 185, 118, 0.03); /* Gradient overlay - subtle gold ambiance */ --gradient-overlay: radial-gradient(ellipse at top left, rgba(210, 185, 118, 0.05) 0%, transparent 60%), radial-gradient(ellipse at bottom right, rgba(210, 185, 118, 0.03) 0%, transparent 60%); /* Button colors */ --btn-primary-bg: linear-gradient(135deg, #B09840, #D2B976, #B09840); --btn-primary-text: #080808; --btn-secondary-bg: var(--bg-card); --btn-secondary-text: var(--text-primary); /* Input colors */ --input-bg: var(--bg-card); --input-border: var(--border-color); --input-text: var(--text-primary); --input-placeholder: var(--text-secondary); --input-focus-border: var(--gold); --input-focus-shadow: rgba(210, 185, 118, 0.2); /* Scrollbar */ --scrollbar-track: var(--bg-primary); --scrollbar-thumb: var(--gold-dark); --scrollbar-thumb-hover: var(--gold); /* Date picker indicator */ --date-picker-filter: invert(0.8); /* Logo filter for dark backgrounds */ --logo-filter: drop-shadow(0 0 20px rgba(210, 185, 118, 0.3)); } /* ============================================= LIGHT THEME - White & Light Gold ============================================= */ [data-theme="light"] { /* Backgrounds - warm cream/ivory whites */ --bg-primary: #f7f4ee; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-gray: #ede8df; --bg-input: #ffffff; /* Text colors */ --text-primary: #1a1610; --text-secondary: #5c5345; --text-muted: #8a7e6e; /* Border colors - warm tint */ --border-color: #d5cfc4; --border-light: #e5e0d6; /* Shadow colors */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-dark: rgba(0, 0, 0, 0.12); /* Table row colors */ --row-hover: rgba(210, 185, 118, 0.12); --row-bg: rgba(0, 0, 0, 0.015); --row-alt: rgba(0, 0, 0, 0.03); /* Gradient overlay */ --gradient-overlay: radial-gradient(ellipse at top left, rgba(210, 185, 118, 0.06) 0%, transparent 50%), radial-gradient(ellipse at bottom right, rgba(210, 185, 118, 0.04) 0%, transparent 50%); /* Button colors */ --btn-primary-bg: linear-gradient(135deg, #B09840, #D2B976, #B09840); --btn-primary-text: #080808; --btn-secondary-bg: var(--bg-card); --btn-secondary-text: var(--text-primary); /* Input colors */ --input-bg: var(--bg-card); --input-border: var(--border-color); --input-text: var(--text-primary); --input-placeholder: var(--text-secondary); --input-focus-border: var(--gold); --input-focus-shadow: rgba(210, 185, 118, 0.2); /* Scrollbar */ --scrollbar-track: var(--bg-primary); --scrollbar-thumb: var(--gold-dark); --scrollbar-thumb-hover: var(--gold); /* Date picker indicator */ --date-picker-filter: invert(0.2); /* Logo filter for light backgrounds */ --logo-filter: drop-shadow(0 0 10px rgba(210, 185, 118, 0.4)) brightness(0.3) contrast(1.2); }