/* ========================================================================== BenueDraws — Master Design Tokens & Theme Variables Path: css/variables.css ========================================================================== */ :root { /* ------------------------------------------------------------------------ Brand Color Palette (Benue Emerald & Golden Jackpot) ------------------------------------------------------------------------ */ --color-primary: #0D8A4E; --color-primary-hover: #0A7A44; --color-primary-light: rgba(13, 138, 78, 0.12); --color-accent: #F59E0B; --color-accent-hover: #D97706; --color-accent-light: rgba(245, 158, 11, 0.15); --color-secondary: #3D2B1F; /* ------------------------------------------------------------------------ LIGHT THEME (Default) ------------------------------------------------------------------------ */ --color-bg: #F8FAFC; --color-surface: #FFFFFF; --color-surface-hover: #F1F5F9; --color-text: #0B1528; --color-text-muted: #64748B; --color-text-inverse: #FFFFFF; --color-border: #E2E8F0; --color-border-strong: #CBD5E1; --color-card-bg: #FFFFFF; --color-input-bg: #F8FAFC; --color-error: #DC2626; --color-success: #0D8A4E; --color-warning: #D97706; --color-info: #2563EB; /* ------------------------------------------------------------------------ Spacing Scale ------------------------------------------------------------------------ */ --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; /* ------------------------------------------------------------------------ Border Radii & Shadows ------------------------------------------------------------------------ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --shadow-sm: 0 1px 3px rgba(11, 21, 40, 0.05); --shadow-md: 0 4px 6px -1px rgba(11, 21, 40, 0.08); --shadow-lg: 0 10px 15px -3px rgba(11, 21, 40, 0.1); --shadow-xl: 0 20px 25px -5px rgba(11, 21, 40, 0.15); --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; } /* ========================================================================== DARK THEME OVERRIDES Activates automatically when ========================================================================== */ [data-theme="dark"] { --color-bg: #0B1528; --color-surface: #111C35; --color-surface-hover: #1A2847; --color-text: #F1F5F9; --color-text-muted: #94A3B8; --color-text-inverse: #0B1528; --color-border: #1E293B; --color-border-strong: #334155; --color-card-bg: #111C35; --color-input-bg: rgba(255, 255, 255, 0.04); --color-primary: #10B981; --color-primary-hover: #34D399; --color-primary-light: rgba(16, 185, 129, 0.15); --color-accent: #FCD34D; --color-accent-hover: #F59E0B; --color-accent-light: rgba(252, 211, 77, 0.15); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6); }