/* Light/dark theming for the store (public + admin). Default = original dark look. [data-theme="light"] on swaps to a warm parchment palette. Load LAST. */ :root{ color-scheme: dark; } :root[data-theme="light"]{ color-scheme: light; /* shared */ --gold:#8a6d1e; --gold-light:#a8842a; --gold-dim:#6f560f; --gold-hover:#a8842a; --ink:#f3eee2; --ink-2:#fbf8f0; --ink-3:#efe8da; --ink-4:#e6dece; --felt:#e9edda; --text:#1b1710; --text-muted:#5f584a; --text-dim:#8a8272; --border:rgba(120,95,20,0.24); --border-light:rgba(0,0,0,0.14); --border-hover:rgba(120,95,20,0.5); --red:#b83025; --danger:#c0392b; } /* Keep text dark on gold surfaces (buttons/badges that use color:var(--ink) on gold). */ :root[data-theme="light"] .btn-gold, :root[data-theme="light"] .cart-btn, :root[data-theme="light"] .search-btn, :root[data-theme="light"] .add-to-cart, :root[data-theme="light"] .badge-gold{ color:#14110b !important; } /* Surfaces hardcoded to dark → light equivalents. */ :root[data-theme="light"] body, :root[data-theme="light"] .admin-sidebar, :root[data-theme="light"] header, :root[data-theme="light"] nav, :root[data-theme="light"] .topbar{ background:var(--ink); color:var(--text); } :root[data-theme="light"] .admin-topbar{ background:var(--ink-2); } /* ---- Theme toggle control ---- */ .theme-toggle{ background:transparent;border:1px solid var(--border);border-radius:50%; width:36px;height:36px;cursor:pointer;flex-shrink:0; display:inline-flex;align-items:center;justify-content:center; color:var(--text-muted);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}