/* Light/dark theming. Default (no attribute) = the original dark-luxury look. [data-theme="light"] on swaps the palette to a warm parchment light mode. Loaded LAST so it overrides base + chrome + admin CSS. */ :root{ color-scheme: dark; } :root[data-theme="light"]{ color-scheme: light; --ink: #f4efe3; /* page background (was near-black) */ --ink-2: #fbf8f0; /* card / raised surface */ --ink-3: #ece4d3; /* hover / deeper surface */ --ivory: #1b1710; /* primary text (was cream) */ --ivory-dim: #4b463a; /* secondary text */ --muted: #837b6b; /* muted text */ --gold: #9a7a1c; /* darker gold for contrast on light */ --gold-bright:#b8922e; --gold-deep: #6f560f; --line: rgba(120,95,20,0.22); --felt: #14503b; --felt-light: #1d6b4f; } /* ---- Fixes for surfaces/text hardcoded to dark (not token-driven) ---- */ :root[data-theme="light"] nav.site-nav{ background:rgba(251,248,240,0.9); } :root[data-theme="light"] .search-overlay{ background:rgba(244,239,227,0.94); } :root[data-theme="light"] body.admin, :root[data-theme="light"] .admin-sidebar{ background:#f4efe3; } :root[data-theme="light"] .admin-topbar{ background:rgba(251,248,240,0.94); } /* Keep text DARK on gold surfaces regardless of theme (these use color:var(--ink) in dark mode, which would flip to light and become unreadable on gold). */ :root[data-theme="light"] .site-announce, :root[data-theme="light"] .announce, :root[data-theme="light"] .nav-cta, :root[data-theme="light"] .btn-primary, :root[data-theme="light"] .btn-sm-inline, :root[data-theme="light"] .cta-form button, :root[data-theme="light"] .nl-form button, :root[data-theme="light"] .search-box button, :root[data-theme="light"] .badge-published, :root[data-theme="light"] .logo-mark{ color:#14110b !important; } /* Dark, hero-style gradient sections read washed-out in light — give them a soft parchment tint so text stays legible. */ :root[data-theme="light"] .hero-compact, :root[data-theme="light"] .hero, :root[data-theme="light"] .page-hero, :root[data-theme="light"] .city-hero, :root[data-theme="light"] .cta-banner, :root[data-theme="light"] .cta-strip, :root[data-theme="light"] .nl-strip{ background: radial-gradient(ellipse at 20% 40%, rgba(20,80,59,0.10) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(154,122,28,0.10) 0%, transparent 60%), var(--ink); } /* ---- Theme toggle control ---- */ .theme-toggle{ background:transparent;border:1px solid var(--line);border-radius:50%; width:38px;height:38px;cursor:pointer;flex-shrink:0; display:inline-flex;align-items:center;justify-content:center; color:var(--ivory-dim);font-size:15px;line-height:1;transition:all 0.2s; } .theme-toggle:hover{border-color:var(--gold);color:var(--gold)} .theme-toggle .icon-dark{display:none} .theme-toggle .icon-light{display:inline} :root[data-theme="light"] .theme-toggle .icon-light{display:none} :root[data-theme="light"] .theme-toggle .icon-dark{display:inline} /* admin sidebar footer variant */ .admin-sidebar-foot .theme-toggle{width:32px;height:32px;font-size:14px}