/* من الحارة للبطولة — theme.css Light-mode override for the light/dark toggle. Default (no [data-theme] attribute, or [data-theme="dark"]) uses each page's own :root values unchanged. This file only overrides variables when is set by the inline loader script or the toggle button. "custom" mode is handled entirely inline (theme.js sets CSS custom properties directly via style.setProperty), so no rule is needed here for it — this file only needs to supply the "light" preset. */ html[data-theme="light"]{ --bg:#FAF7F0; --surface:#FFFFFF; --surface-2:#F1ECE1; --text:#1A1613; --text-muted:#6B6459; --line:#E6E0D2; --hero-bg:#FAF7F0; --hero-line:#E6E0D2; --nile:#1E4E4A; --nile-bright:#3E7A73; --nile-deep:#0E2E2B; --gold:#B8860B; --power-gold:#B8860B; --power-gold-deep:#8C6608; --red:#C8102E; --power-red:#C8102E; --power-red-deep:#8C0A1F; --green:#1D8A4C; --green-deep:#146537; } /* Background scene / atmosphere: keep it usable in light mode without disappearing into the page or overpowering the new light surface. */ html[data-theme="light"] .bg-scene{opacity:.55;} html[data-theme="light"] .bg-scene .pyramids{opacity:.28;} html[data-theme="light"] .bg-scene .sun-glow{opacity:.5;} html[data-theme="light"] .bg-scene .star{opacity:.35 !important;} /* Cards and panels that used pure-black gradients for the dark theme need a lighter equivalent so text stays readable. */ html[data-theme="light"] .id-card, html[data-theme="light"] .example-card, html[data-theme="light"] .video-card{ background:linear-gradient(165deg,#FFFFFF,#F1ECE1); box-shadow:0 14px 34px -18px rgba(20,16,12,.18), 0 0 0 1px rgba(184,134,11,.15); } html[data-theme="light"] .session-card{ background:linear-gradient(165deg,#FFFFFF,#F1ECE1); box-shadow:0 14px 34px -18px rgba(20,16,12,.18), 0 0 0 1px rgba(184,134,11,.15); } /* Buttons/text that were hard-set to white for contrast against a dark card stay white — those cards keep a colored (red/gold) header bar in both themes, so white text is still correct. No override needed there. */ /* Theme toggle control itself */ .theme-toggle{ display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:999px; padding:4px; cursor:pointer; background:var(--surface); } .theme-toggle .opt{ width:28px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:999px; font-size:12px; transition:background .15s, color .15s; } .theme-toggle .opt.active{background:var(--text); color:var(--bg);} /* The hero headline's gold/white gradient was tuned for a dark backdrop — the white midpoint nearly vanishes on a light surface, so give light mode its own darker-gold gradient that stays legible. */ html[data-theme="light"] .hero h1 .stamp{ background:linear-gradient(90deg, #8C6608 15%, #B8860B 50%, #8C6608 85%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:none; }