/* ───────────────────────────────────────────────────────────── Giftella Registry — light and dark. Three states, in this order: 1. bare :root → the light palette, always defined 2. prefers-color-scheme → follows the visitor's OS, unless they have explicitly chosen light 3. [data-mode="dark"] → an explicit choice always wins Every colour has its light value defined on plain :root, so no surface can ever be left undefined. The dark blocks only swap values, never introduce new ones. NOTE: data-MODE (light/dark) lives on . data-THEME (gold/sage/blush/navy/sky/sunny) lives on and is the registry owner's colour choice. They are different things and must not be merged. ───────────────────────────────────────────────────────────── */ :root { --bg: #fbf7ee; --bg2: #f4ebd9; --text: #1d1432; --muted: #6c5e85; --gold: #c8a84b; --gold2: #b8932e; --plum: #6138a8; --card: #ffffff; --card-line: rgba(20,12,40,0.08); --rose: #db6b8c; --sage: #6cb08c; --shadow: rgba(20,12,40,0.10); --shadow-lg: rgba(20,12,40,0.20); color-scheme: light; } /* The dark values, applied by both selectors below. */ @media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) { --bg: #141021; --bg2: #1b1630; --text: #f6f1e8; --muted: #a79fbc; --gold: #e0c468; --gold2: #cba94a; --plum: #a98cf0; --card: #1e1834; --card-line: rgba(246,241,232,0.13); --rose: #ee8aa8; --sage: #86c9a5; --shadow: rgba(0,0,0,0.45); --shadow-lg: rgba(0,0,0,0.65); color-scheme: dark; } :root:not([data-mode="light"]) body[data-theme="sage"] { --gold:#86c9a5; --gold2:#6cb08c; --plum:#9fe0c0; --bg:#101a16; --bg2:#16241e; } :root:not([data-mode="light"]) body[data-theme="blush"] { --gold:#ee93ae; --gold2:#d97a98; --plum:#f0a9c0; --bg:#1c1218; --bg2:#261821; } :root:not([data-mode="light"]) body[data-theme="navy"] { --gold:#e3c158; --gold2:#cba94a; --plum:#9fb6f0; --bg:#0f1424; --bg2:#161d31; } :root:not([data-mode="light"]) body[data-theme="sky"] { --gold:#8cc3ee; --gold2:#6ca7d8; --plum:#a6d2f5; --bg:#0e1620; --bg2:#14202d; } :root:not([data-mode="light"]) body[data-theme="sunny"] { --gold:#f0be5a; --gold2:#e5a832; --plum:#f2d08a; --bg:#1c1710; --bg2:#271f14; } } :root[data-mode="dark"] { --bg: #141021; --bg2: #1b1630; --text: #f6f1e8; --muted: #a79fbc; --gold: #e0c468; --gold2: #cba94a; --plum: #a98cf0; --card: #1e1834; --card-line: rgba(246,241,232,0.13); --rose: #ee8aa8; --sage: #86c9a5; --shadow: rgba(0,0,0,0.45); --shadow-lg: rgba(0,0,0,0.65); color-scheme: dark; } :root[data-mode="dark"] body[data-theme="sage"] { --gold:#86c9a5; --gold2:#6cb08c; --plum:#9fe0c0; --bg:#101a16; --bg2:#16241e; } :root[data-mode="dark"] body[data-theme="blush"] { --gold:#ee93ae; --gold2:#d97a98; --plum:#f0a9c0; --bg:#1c1218; --bg2:#261821; } :root[data-mode="dark"] body[data-theme="navy"] { --gold:#e3c158; --gold2:#cba94a; --plum:#9fb6f0; --bg:#0f1424; --bg2:#161d31; } :root[data-mode="dark"] body[data-theme="sky"] { --gold:#8cc3ee; --gold2:#6ca7d8; --plum:#a6d2f5; --bg:#0e1620; --bg2:#14202d; } :root[data-mode="dark"] body[data-theme="sunny"] { --gold:#f0be5a; --gold2:#e5a832; --plum:#f2d08a; --bg:#1c1710; --bg2:#271f14; } /* Paint the page ground explicitly so nothing shows through. */ html { background: var(--bg); } body { background: var(--bg); color: var(--text); } /* Product photos are shot on white and glare on a dark page. */ @media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .gift-img img, :root:not([data-mode="light"]) .starter-img, :root:not([data-mode="light"]) .si-img { filter: brightness(0.92); } } :root[data-mode="dark"] .gift-img img, :root[data-mode="dark"] .starter-img, :root[data-mode="dark"] .si-img { filter: brightness(0.92); } /* ── The toggle ────────────────────────────────────────────── Fixed bottom right. Toasts on these pages are bottom centre, so nothing collides. */ .gmode { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; align-items: center; gap: 7px; padding: 9px 14px 9px 12px; border-radius: 100px; border: 1px solid var(--card-line); background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: 0 6px 20px var(--shadow); transition: transform .16s ease, box-shadow .16s ease, background .16s ease; } .gmode:hover { transform: translateY(-2px); box-shadow: 0 10px 26px var(--shadow-lg); } .gmode:active { transform: translateY(0); } .gmode:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .gmode-i { font-size: 15px; line-height: 1; } .gmode-t { letter-spacing: .1px; } @media (max-width: 560px) { .gmode { right: 12px; bottom: 12px; padding: 9px; } .gmode-t { display: none; } } @media print { .gmode { display: none; } }