/* ===========================================================================
Palette previews — five options, none of them live
===========================================================================
Everything is scoped under html[data-palette="…"]. With no attribute — every
ordinary page load — this file does nothing, so the cream-and-gold identity
ships untouched and the switcher carries no risk to it.
Two layers, because the theme has two:
• creme.css is well tokenised (692 var() uses), so remapping its :root
re-colours most of the site at once.
• luxury.css is not (117 hard-coded hexes), so its surfaces — header,
footer, cards, badges, buttons, hero scrim — are re-stated by hand.
Adding a sixth palette means adding one token block. Nothing below it
changes; the structural rules are palette-agnostic.
---------------------------------------------------------------------------
Why every --p-accent-ink differs from the supplied accent
---------------------------------------------------------------------------
All five supplied accents are too light to carry text on their own
background and card colours. Measured against WCAG AA's 4.5:1:
maroon #B76E79 3.61 on bg 2.94 on cards
burgundy #C59A58 2.29 1.80
espresso #BD914C 2.51 2.03
forest #B68A43 2.87 2.57
rose #D4A0A0 2.10 1.67
Several do not even clear the 3:1 floor for meaningful non-text UI. The
live cream theme measures 0 contrast failures, so a preview that regressed
that would have the client judging a palette that could not ship.
Each accent is therefore kept exactly as supplied where it works — fills,
and text on the dark footer — and darkened at the SAME HUE for text on
light surfaces, as --p-accent-ink. Every derived value here was computed
against its own palette's surfaces, not eyeballed.
To use an accent exactly as supplied, set --p-accent-ink to the same value
as --p-accent in that block and accept the contrast cost. It is one line,
and it is the client's call to make deliberately.
=========================================================================== */
/* Maroon & rose gold */
html[data-palette="maroon"] {
--p-primary: #800020;
--p-primary-hover:#972e48;
--p-bg: #FFF8F0;
--p-card: #F0DFD6;
--p-tint: #f7eae2;
--p-accent: #B76E79; /* as supplied: fills, and text on the footer */
--p-accent-ink: #934954; /* same hue, darkened for text on light */
--p-text: #45111E;
--p-text-soft: #6e444c;
--p-muted: #8a223c;
--p-line: #d5beb9;
--p-line-strong: #b69997;
--p-footer: #36000D;
--p-footer-text: #d7cccf;
--p-footer-link: #e7e0e2;
--p-icon: #800020;
}
/* Burgundy & champagne */
html[data-palette="burgundy"] {
--p-primary: #701F32;
--p-primary-hover:#8a4757;
--p-bg: #F8F0E8;
--p-card: #E8D4C0;
--p-tint: #efe1d2;
--p-accent: #C59A58; /* as supplied: fills, and text on the footer */
--p-accent-ink: #725528; /* same hue, darkened for text on light */
--p-text: #35121C;
--p-text-soft: #604349;
--p-muted: #6a2438;
--p-line: #cbb5a6;
--p-line-strong: #ab9288;
--p-footer: #35121C;
--p-footer-text: #d7d0d2;
--p-footer-link: #e7e3e4;
--p-icon: #701f32;
}
/* Espresso & gold */
html[data-palette="espresso"] {
--p-primary: #493027;
--p-primary-hover:#6a554e;
--p-bg: #F6EFE5;
--p-card: #E6D7C5;
--p-tint: #ede2d3;
--p-accent: #BD914C; /* as supplied: fills, and text on the footer */
--p-accent-ink: #72562a; /* same hue, darkened for text on light */
--p-text: #30231E;
--p-text-soft: #5c504a;
--p-muted: #60463c;
--p-line: #c9baaa;
--p-line-strong: #a89a8c;
--p-footer: #211713;
--p-footer-text: #d3d1d0;
--p-footer-link: #e4e3e3;
--p-icon: #493027;
}
/* Forest green & ivory */
html[data-palette="forest"] {
--p-primary: #123D2D;
--p-primary-hover:#3d6053;
--p-bg: #F7F5EC;
--p-card: #E5EBDD;
--p-tint: #edf0e4;
--p-accent: #B68A43; /* as supplied: fills, and text on the footer */
--p-accent-ink: #7e5f2e; /* same hue, darkened for text on light */
--p-text: #173A2D;
--p-text-soft: #486357;
--p-muted: #2e735a;
--p-line: #c4cfc1;
--p-line-strong: #9fafa1;
--p-footer: #09291F;
--p-footer-text: #ced4d2;
--p-footer-link: #e1e5e4;
--p-icon: #123d2d;
}
/* Dusty rose & blush */
html[data-palette="rose"] {
--p-primary: #A9475D;
--p-primary-hover:#b2596d;
--p-bg: #FFF5F2;
--p-card: #F2D8D9;
--p-tint: #f8e5e4;
--p-accent: #D4A0A0; /* as supplied: fills, and text on the footer */
--p-accent-ink: #974444; /* same hue, darkened for text on light */
--p-text: #45232B;
--p-text-soft: #6e5157;
--p-muted: #8a4656;
--p-line: #d6bbbd;
--p-line-strong: #b79a9e;
--p-footer: #54232F;
--p-footer-text: #ddd3d5;
--p-footer-link: #eae5e6;
--p-icon: #a9475d;
}
/* ===========================================================================
Structural mapping — applies to whichever palette is active
=========================================================================== */
/* ── creme.css tokens ───────────────────────────────────────────────────── */
html[data-palette] {
--ivory: var(--p-bg);
--paper: var(--p-bg);
--surface: #FFFFFF;
--surface-sunk: var(--p-card);
--ink: var(--p-text);
--ink-soft: var(--p-text-soft);
--beige: var(--p-card);
--sage: var(--p-line-strong);
--sage-tint: var(--p-tint);
--terracotta: var(--p-accent-ink);
--terracotta-tint: var(--p-tint);
--line: var(--p-line);
--line-strong: var(--p-line-strong);
--muted: var(--p-muted);
--muted-soft: var(--p-muted);
}
/* ── Header and footer ──────────────────────────────────────────────────── */
html[data-palette] .site-header { background: var(--p-footer); border-bottom-color: var(--p-primary); }
html[data-palette] .site-footer { background: var(--p-footer); color: var(--p-footer-text); }
html[data-palette] .site-footer a { color: var(--p-footer-link); }
html[data-palette] .badge-count { background: var(--p-accent); color: var(--p-footer); }
/* ── Buttons ────────────────────────────────────────────────────────────── */
html[data-palette] .btn-primary,
html[data-palette] .card-quickadd .btn-primary {
background: var(--p-primary); border-color: var(--p-primary); color: #FFFFFF;
}
html[data-palette] .btn-primary:hover,
html[data-palette] .card-quickadd .btn-primary:hover {
background: var(--p-primary-hover); border-color: var(--p-primary-hover);
}
/* ── Accent text ────────────────────────────────────────────────────────── */
html[data-palette] .eyebrow,
html[data-palette] .product-card:hover .card-title a,
html[data-palette] .concern-toggle:checked + .concern-summary .concern-label { color: var(--p-accent-ink); }
/* ── Cards and panels ───────────────────────────────────────────────────── */
html[data-palette] .product-card { background: #FFFFFF; border-color: var(--p-line); }
html[data-palette] .card-media,
html[data-palette] .product-card .card-media,
html[data-palette] .pdp-main-img { background: var(--p-card); }
html[data-palette] .card-benefits li { background: var(--p-tint); border-color: var(--p-line); color: var(--p-text-soft); }
html[data-palette] .section-sunk,
html[data-palette] .story-panel,
html[data-palette] .trust-strip { background: var(--p-card); }
html[data-palette] .trust-strip > div { border-right-color: var(--p-line); }
html[data-palette] .concern-body { background: var(--p-tint); }
/* ── Badges ─────────────────────────────────────────────────────────────── */
html[data-palette] .badge-save { background: var(--p-primary); color: #FFFFFF; }
html[data-palette] .badge-upcoming { background: var(--p-tint); color: var(--p-accent-ink); border-color: var(--p-line-strong); }
/* ── Hero scrim ─────────────────────────────────────────────────────────── */
html[data-palette] .luxury-slide-copy {
background: linear-gradient(90deg,
color-mix(in srgb, var(--p-bg) 91%, transparent),
color-mix(in srgb, var(--p-bg) 47%, transparent) 75%,
transparent);
}
@media (max-width: 767px) {
html[data-palette] .wrap.section > .luxury-slide .luxury-slide-copy,
html[data-palette] .luxury-slide-copy { background: color-mix(in srgb, var(--p-bg) 88%, var(--p-card)); }
}
/* ── Concern wheel edges ────────────────────────────────────────────────── */
html[data-palette] .concern-summary:hover .concern-dot,
html[data-palette] .concern-toggle:checked + .concern-summary .concern-dot { border-color: var(--p-accent-ink); }
html[data-palette] .concern-toggle:focus-visible + .concern-summary .concern-dot { outline-color: var(--p-accent-ink); }
/* ── Trust-strip icons ──────────────────────────────────────────────────────
These four are with #B87861 baked in, so unlike the 14
inline
with #B87861 baked in, so unlike the 14
inline