/* iLotto Theme System ============================================================ HOW TO USE: 1. Link this file: (or "../theme.css") 2. Default is dark theme 3. Add class="light" to for light theme 4. Override --brand-primary to change the lottery's accent color VARIABLE QUICK REFERENCE ======================== BACKGROUNDS: --bg-primary, --bg-surface, --bg-surface-2, --bg-surface-3 TEXT: --text-primary, --text-secondary, --text-tertiary BORDERS: --border-primary, --border-subtle BRAND: --brand-primary, --brand-secondary, --brand-glow, --brand-dim BALLS: --ball-main-from, --ball-main-to, --ball-bonus-from, --ball-bonus-to SHADOWS: --shadow-sm, --shadow-md, --shadow-lg SEMANTIC: --color-success, --color-warning, --color-danger, --color-info STRATEGIES: --color-hot, --color-cold, --color-overdue, --color-optimal ============================================================ */ /* ── DARK THEME (default) ── */ :root { /* Core backgrounds */ --bg-primary: #0a0b1a; --bg-surface: #111228; --bg-surface-2: #1a1c35; --bg-surface-3: #242748; --bg-overlay: rgba(0, 0, 0, 0.85); /* Borders & dividers */ --border-primary: #2e3155; --border-subtle: #222540; /* Text */ --text-primary: #eef0ff; --text-secondary: #9ba0c8; --text-tertiary: #6b70a0; --text-on-brand: #ffffff; /* Brand colors (override per lottery) */ --brand-primary: #e63946; --brand-primary-rgb: 230, 57, 70; --brand-secondary: #ffd700; --brand-glow: rgba(230, 57, 70, 0.25); --brand-dim: rgba(230, 57, 70, 0.12); /* Semantic colors */ --color-success: #2ecc71; --color-warning: #f39c12; --color-danger: #e74c3c; --color-info: #3498db; /* Strategy colors */ --color-hot: #e63946; --color-cold: #3498db; --color-overdue: #a855f7; --color-frequent: #3498db; --color-balanced: #a855f7; --color-cluster: #00cec9; --color-random: #6b70a0; --color-optimal: #ffd700; /* Ball colors */ --ball-main-from: var(--brand-primary); --ball-main-to: color-mix(in srgb, var(--brand-primary), black 30%); --ball-main-text: #ffffff; --ball-bonus-from: #ffd700; --ball-bonus-to: #e6a800; --ball-bonus-text: #1a1a2e; --ball-shadow: rgba(0, 0, 0, 0.3); --ball-highlight: rgba(255, 255, 255, 0.25); /* Header */ --header-bg: linear-gradient(135deg, #1a0a2e 0%, #3d1040 40%, #5c0a1e 100%); --header-border: var(--brand-primary); /* Inputs & interactive */ --input-bg: var(--bg-surface-2); --input-border: var(--border-primary); --input-focus: var(--brand-primary); /* Scrollbar */ --scrollbar-bg: var(--bg-surface); --scrollbar-thumb: var(--border-primary); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); --shadow-brand: 0 4px 20px rgba(var(--brand-primary-rgb), 0.3); /* Radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 9999px; /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-slow: 0.4s ease; /* Typography */ --font-family: 'Rubik', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Z-index layers */ --z-header: 100; --z-dropdown: 200; --z-modal: 300; --z-toast: 400; /* Color scheme hint for browser */ color-scheme: dark; } /* ── LIGHT THEME ── */ :root.light { --bg-primary: #f5f6fa; --bg-surface: #ffffff; --bg-surface-2: #eef0f5; --bg-surface-3: #e2e5ee; --bg-overlay: rgba(0, 0, 0, 0.5); --border-primary: #d1d5e0; --border-subtle: #e8eaf0; --text-primary: #1a1a2e; --text-secondary: #4a4e6a; --text-tertiary: #7a7f9a; --text-on-brand: #ffffff; --brand-glow: rgba(var(--brand-primary-rgb), 0.15); --brand-dim: rgba(var(--brand-primary-rgb), 0.08); --ball-shadow: rgba(0, 0, 0, 0.15); --ball-highlight: rgba(255, 255, 255, 0.4); --header-bg: linear-gradient(135deg, #1a1a2e 0%, #2d2050 40%, #3d1535 100%); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-brand: 0 4px 20px rgba(var(--brand-primary-rgb), 0.15); --scrollbar-bg: #e8eaf0; --scrollbar-thumb: #c0c4d0; color-scheme: light; } /* ── SYSTEM PREFERENCE AUTO-DETECT ── */ @media (prefers-color-scheme: light) { :root:not(.dark):not(.light) { --bg-primary: #f5f6fa; --bg-surface: #ffffff; --bg-surface-2: #eef0f5; --bg-surface-3: #e2e5ee; --bg-overlay: rgba(0, 0, 0, 0.5); --border-primary: #d1d5e0; --border-subtle: #e8eaf0; --text-primary: #1a1a2e; --text-secondary: #4a4e6a; --text-tertiary: #7a7f9a; --brand-glow: rgba(var(--brand-primary-rgb), 0.15); --brand-dim: rgba(var(--brand-primary-rgb), 0.08); --ball-shadow: rgba(0, 0, 0, 0.15); --ball-highlight: rgba(255, 255, 255, 0.4); --header-bg: linear-gradient(135deg, #1a1a2e 0%, #2d2050 40%, #3d1535 100%); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-brand: 0 4px 20px rgba(var(--brand-primary-rgb), 0.15); --scrollbar-bg: #e8eaf0; --scrollbar-thumb: #c0c4d0; color-scheme: light; } } /* ── THEME TRANSITION ── */ *, *::before, *::after { transition: background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal); } /* ── GLOBAL BODY ── */ body { background: var(--bg-primary); color: var(--text-primary); } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width: 6px; background: var(--scrollbar-bg); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } /* ── THEME TOGGLE ── */ .theme-toggle { background: var(--bg-surface-2); border: 1px solid var(--border-primary); border-radius: var(--radius-full); width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; padding: 0; transition: background var(--transition-fast); flex-shrink: 0; } .theme-toggle:hover { background: var(--bg-surface-3); } .theme-icon-light { display: none; } :root.light .theme-icon-dark { display: none; } :root.light .theme-icon-light { display: inline; } /* ── HEADER: LIGHT BACKGROUND IN LIGHT THEME ── */ /* Headers switch to light in light mode. All text inside uses theme variables which automatically resolve to dark-on-light values. */ :root.light header, :root.light .header, :root.light .hdr { background: var(--bg-surface) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); color: var(--text-primary); } /* Predictor h1 uses white-to-gold gradient text — invisible on white. Switch to a dark-to-brand gradient in light mode. */ :root.light .header h1 { background: linear-gradient(135deg, var(--text-primary) 0%, #b8860b 100%); -webkit-background-clip: text; background-clip: text; } /* Help page title gradient */ :root.light .hdr .hdr-title { background: linear-gradient(135deg, var(--text-primary), #b8860b); -webkit-background-clip: text; background-clip: text; } /* Help button (?) — override inline color */ :root.light header a[title="Help"], :root.light .header a[title="Help"], :root.light .hdr a[title="Help"] { color: var(--text-tertiary) !important; background: var(--bg-surface-2) !important; border-color: var(--border-primary) !important; } :root.light header a[title="Help"]:hover, :root.light .header a[title="Help"]:hover, :root.light .hdr a[title="Help"]:hover { color: var(--text-primary) !important; background: var(--bg-surface-3) !important; } /* OS preference auto-detect — same header changes */ @media (prefers-color-scheme: light) { :root:not(.dark):not(.light) header, :root:not(.dark):not(.light) .header, :root:not(.dark):not(.light) .hdr { background: #ffffff !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); color: #1a1a2e; } :root:not(.dark):not(.light) .header h1 { background: linear-gradient(135deg, #1a1a2e 0%, #b8860b 100%); -webkit-background-clip: text; background-clip: text; } :root:not(.dark):not(.light) .hdr .hdr-title { background: linear-gradient(135deg, #1a1a2e, #b8860b); -webkit-background-clip: text; background-clip: text; } :root:not(.dark):not(.light) header a[title="Help"], :root:not(.dark):not(.light) .header a[title="Help"], :root:not(.dark):not(.light) .hdr a[title="Help"] { color: #7a7f9a !important; background: #eef0f5 !important; border-color: #d1d5e0 !important; } } /* ── LIGHT THEME SPECIFIC ADJUSTMENTS ── */ /* Cards, strategies, sections — add shadows and softer borders */ :root.light .card, :root.light .strategy, :root.light .sec, :root.light .lottery-card, :root.light .how-card, :root.light .consent-box, :root.light .strat-info, :root.light .mcard, :root.light .strat-card { box-shadow: var(--shadow-sm); border-color: var(--border-subtle); } /* Lottery cards on landing page */ :root.light .lottery-card { border: 1px solid var(--border-subtle); } :root.light .lottery-card:hover { box-shadow: var(--shadow-md); } /* Balls — softer shadows */ :root.light .ball { box-shadow: 0 3px 10px rgba(0,0,0,0.15), inset 0 -2px 4px rgba(0,0,0,0.1), inset 0 2px 4px rgba(255,255,255,0.3); } /* Disclaimer */ :root.light .disclaimer { background: rgba(243, 156, 18, 0.06); border-color: rgba(243, 156, 18, 0.25); } /* Dropdowns — lighter shadows */ :root.light .lang-dropdown, :root.light .lang-menu, :root.light .lang-dd { box-shadow: var(--shadow-md); border-color: var(--border-primary); } /* Consent gate overlay */ :root.light .consent-gate { background: rgba(0, 0, 0, 0.6); } /* Section headers — stronger border for visibility */ :root.light .section-header { border-bottom-color: var(--border-primary); } /* Stat boxes and surface-2 elements */ :root.light .stat-box, :root.light .gen-meta-item, :root.light .hist-idx, :root.light .flow { border: 1px solid var(--border-subtle); } /* Number cells in heatmap */ :root.light .num-cell { border: 1px solid var(--border-subtle); } /* Tabs — visible active state */ :root.light .tab.active { border-bottom-width: 2px; } /* Draw rows */ :root.light .draw-row { border-bottom-color: var(--border-subtle); } /* Pair list items */ :root.light .pair-list li { border-bottom-color: var(--border-subtle); } /* History rows */ :root.light .hist-row { border-bottom-color: var(--border-subtle); } /* OS preference auto-detect — same adjustments */ @media (prefers-color-scheme: light) { :root:not(.dark):not(.light) .card, :root:not(.dark):not(.light) .strategy, :root:not(.dark):not(.light) .sec, :root:not(.dark):not(.light) .lottery-card, :root:not(.dark):not(.light) .how-card, :root:not(.dark):not(.light) .consent-box, :root:not(.dark):not(.light) .strat-info, :root:not(.dark):not(.light) .mcard, :root:not(.dark):not(.light) .strat-card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border-color: #e8eaf0; } :root:not(.dark):not(.light) .lottery-card { border: 1px solid #e8eaf0; } :root:not(.dark):not(.light) .ball { box-shadow: 0 3px 10px rgba(0,0,0,0.15), inset 0 -2px 4px rgba(0,0,0,0.1), inset 0 2px 4px rgba(255,255,255,0.3); } :root:not(.dark):not(.light) .disclaimer { background: rgba(243, 156, 18, 0.06); border-color: rgba(243, 156, 18, 0.25); } :root:not(.dark):not(.light) .lang-dropdown, :root:not(.dark):not(.light) .lang-menu, :root:not(.dark):not(.light) .lang-dd { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); border-color: #d1d5e0; } :root:not(.dark):not(.light) .num-cell, :root:not(.dark):not(.light) .stat-box, :root:not(.dark):not(.light) .gen-meta-item, :root:not(.dark):not(.light) .flow { border: 1px solid #e8eaf0; } }