/* ============================================================================ THEME MODES · System / Light / Dark · ADDITIVE layer ---------------------------------------------------------------------------- Load AFTER premium-italian.css. This file does NOT redefine the dark look: dark already lives in premium-italian.css :root, so it stays the default (and the no-JS fallback). Here we only: 1. expose semantic aliases (the new --bg-primary / --surface-card / ... names) 2. override the existing --bs-* / --it-* tokens for [data-theme="light"] 3. add theme-switch transitions, the toggle button, desktop card hover lift Nothing here changes existing markup or card structure. ========================================================================== */ /* 1. Semantic aliases (point at the existing token system; safe to adopt later) */ :root { --bg-primary: var(--bs-bg); --bg-elevated: var(--bs-bg-strong); --surface-card: var(--bs-surface); --surface-2: var(--bs-surface-2); --text-main: var(--bs-text); --text-muted: var(--bs-text-muted); --border-soft: var(--bs-border); --accent-brand: var(--it-accent); } /* Make native UI (scrollbars, form controls) match the active mode */ :root, [data-theme="dark"] { color-scheme: dark; } /* 2. LIGHT MODE — re-map the existing tokens to a premium light palette. Because every component reads --bs-* / --it-*, this repaints them in place. */ [data-theme="light"] { color-scheme: light; /* Page canvas — soft cool white */ --bs-bg: #eef1f7; --bs-bg-strong: #ffffff; /* Surfaces — white cards with faint cool tint on hover/inset */ --bs-surface: #ffffff; --bs-surface-2: #f3f5fb; --bs-surface-3: #e9eef7; /* Borders / dividers */ --bs-border: #dfe4ee; --bs-border-strong: #cbd4e2; --bs-divider: #e9eef6; /* Text — dark ink on light */ --bs-text: #0f1626; --bs-text-muted: #4b5a73; --bs-text-soft: #7c8aa3; --bs-text-invert: #ffffff; /* Gold/green accents stay on-brand; soften the translucent washes for light */ --bs-primary-soft: rgba(245, 197, 24, .18); --bs-accent-soft: rgba(245, 197, 24, .16); /* Lighter, cooler shadows */ --bs-shadow-sm: 0 1px 2px rgba(15, 22, 38, .08); --bs-shadow: 0 6px 18px rgba(15, 22, 38, .10); --bs-shadow-lg: 0 20px 50px rgba(15, 22, 38, .15); } /* A few surfaces hardcode a dark glass/rgba and so won't flip via tokens alone. Override just those for light (still additive — no markup touched). */ [data-theme="light"] .glass, [data-theme="light"] header.glass { background: rgba(255, 255, 255, .80) !important; box-shadow: 0 10px 30px rgba(15, 22, 38, .10); } [data-theme="light"] header.glass::after { opacity: .7; } /* 3. SMART THEME ENGINE — the fix for switch lag. Transitions are applied ONLY while a switch is in progress (JS adds .theme-transitioning to for ~300ms) and ONLY to the major layout surfaces. Every nested text node inherits its new color INSTANTLY instead of animating, so we never tween thousands of elements => no freeze/jank. (No transform/translateZ layer promotion is needed: color transitions don't benefit from the GPU, and promoting big surfaces would just waste memory.) */ body.theme-transitioning, body.theme-transitioning .it-main, body.theme-transitioning header.glass, body.theme-transitioning .glass, body.theme-transitioning .it-header__inner, body.theme-transitioning #navDrawer, body.theme-transitioning #slipSheet, body.theme-transitioning .casino-app, body.theme-transitioning .casino-toolbar { transition: background-color .3s ease, color .3s ease, border-color .3s ease; } /* The toggle button keeps its own tiny micro-interaction (a single element). */ .theme-toggle { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .08s ease; } /* Desktop-only premium hover lift for the existing game cards. Scoped to fine-pointer/hover devices so mobile taps don't get a stuck hover. Card markup/design is untouched — this only adds motion + glow. */ @media (hover: hover) and (pointer: fine) { .casino-card { transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease; } .casino-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(0, 0, 0, .45), 0 0 0 1px var(--it-accent); } [data-theme="light"] .casino-card:hover { box-shadow: 0 16px 38px rgba(15, 22, 38, .18), 0 0 0 1px var(--it-accent); } } /* 4. Theme toggle button — 44x44 touch target, on-brand */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: none; border-radius: 12px; border: 1px solid var(--bs-border-strong); background: var(--bs-surface-2); color: var(--it-accent); font-size: 16px; cursor: pointer; } .theme-toggle:hover { border-color: var(--it-accent); } .theme-toggle:active { transform: scale(.94); } .theme-toggle:focus-visible { outline: 2px solid var(--it-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html, body, .it-main, .glass, header.glass, .pnav-link, .hbtn, .balance-chip, .btn-ghost, .theme-toggle, .casino-card { transition: none !important; } }