/* =========================================================
Y'ALLTERNATIVE LIVING — shared design system
Goth meets Southern-alt. Leather, whiskey, moonlight,
with a rainbow that only shows up when it means something.
========================================================= */
/* Fonts are loaded from Google Fonts (see the s in each page ).
Heading: Gloock -- var(--font-display) / var(--font-heading)
Body: DM Sans -- var(--font-body)
Neither Cormorant Garamond nor Outfit (what this comment used to name)
has ever been loaded by this site; don't reintroduce them as fallbacks. */
/* ---------------------------------------------------------
THEME TOKENS
Dark is the brand's native mode (moody, leather, moonlit);
light is a clean daytime read (cream/paper, same accents).
Everything color-related routes through these custom
properties -- one attribute flip repaints the whole site.
--------------------------------------------------------- */
:root {
color-scheme: dark;
/* core palette -- DARK (default) */
--ink: #17130f; /* elevated near-black, not pure #000 */
--ink-2: #1e1815; /* raised panel */
--ink-3: #262019; /* card / border fill */
--hide: #4a3a2e; /* border / rule (raised contrast) */
--paper: #f3ead9; /* warm off-white text */
--paper-dim: #cfc0a8; /* muted body text on dark */
--whiskey: #d69b5c; /* amber accent */
--whiskey-dim: #8a5c30;
--rose: #c65a6d; /* dusty rose / wine accent (NOT for text!) */
--rose-dim: #7d3140;
/* --rose is a bit too close in luminance to our dark surfaces to clear
4.5:1 as body/UI TEXT (only ~3.9-4.5:1 against ink/ink-2/ink-3) --
--rose-text is a brightened tint reserved for that use (error text,
link-hover, etc.) so it reads clearly against dark backgrounds. */
--rose-text: #d17b8a;
--sage: #7c8f6e; /* faded sage, secondary accent */
/* The .in-stock badge in the search results tints its own background
with rgba(92,168,108,.15), which lifts the effective backdrop to
~#272e22 in dark and ~#dbdfc8 in light. --sage as the label on that
measured 4.00:1 (dark) and 4.42:1 (light) -- both under the 4.5:1 AA
floor, and at 10.9px/600 the large-text carve-out does not apply
(audit C, finding M6). One step of separation each way clears it
with margin: 5.4:1 dark, 5.8:1 light. Scoped to that badge so the
--sage accent everywhere else is untouched. */
--sage-strong: #93a884;
/* Semantic Tokens */
--error: #e65c5c;
--success: #5ca86c;
--focus-ring: var(--whiskey);
--shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.55);
/* Fully opaque -- a frosted/translucent header let the hero's radial
glow bleed through and blur behind the logo, which read as a muddy
vignette rather than a clean brand mark in some renderers. A solid
header reads more polished and renders identically everywhere. */
--nav-bg: rgb(23, 19, 15);
--footer-bg: #0f0c0a; /* a touch darker than --ink for depth */
}
:root[data-theme="light"] {
color-scheme: light;
/* core palette -- LIGHT */
--ink: #faf5ea; /* warm paper background */
--ink-2: #f1e9d8; /* raised panel */
--ink-3: #ece2cd; /* card fill */
--hide: #c4a880; /* border / rule (raised contrast) */
--paper: #221a14; /* near-black warm text */
--paper-dim: #5b4d3d; /* muted body text on light */
/* #a8631f (the original "darkened for AA contrast" amber) still fell
short at the small text sizes .eyebrow/.card-cat actually use --
4.3:1 vs the 4.5:1 AA floor. #93571b cleared 4.5:1 against flat --ink
and --ink-2, but not against the amber-TINTED chip fills this file
builds with `oklch(from var(--whiskey) l c h / )`: tinting a
light surface with a dark amber darkens the background, so
.dispatch-badge (.12 tint, 4.10:1) and .concern-pill.active (.18
tint, 4.17:1) both landed under the floor on every product card.
Darkened to #7f4a13, which clears 4.5:1 on flat surfaces AND on the
.10-.18 self-tints (4.6:1-5.1:1). --whiskey is only ever used in
light mode as text on a light surface or as a fill under --ink text,
so darkening only ever raises contrast. */
--whiskey: #7f4a13;
--whiskey-dim: #7a4816;
--rose: #9c2f45; /* wine accent, darkened for contrast (NOT for text!) */
--rose-dim: #7d3140;
--rose-text: var(--rose); /* already >=4.5:1 as text in light mode */
--sage: #4f6a45;
--sage-strong: #41573a;
/* Semantic Tokens */
--error: #d13b3b;
/* Same tint story as the amber above. The old #3b8248 as text on its own
.12 tint was 3.39:1 (.receipt-status-badge on thank-you). #276030 clears
4.7:1+ on the tints and lifts white-on-fill (.timeline-step.step-done,
.search-add-btn.is-added) from 4.70:1 to 7.49:1.
NB: scripts/qa-check.js parses this block with a regex that does not
strip comments, so never write "--token: #hex" in prose here -- it is
picked up as a real declaration and shadows the one below. */
--success: #276030;
--focus-ring: var(--whiskey);
--shadow: 0 12px 26px -14px rgba(60, 40, 20, 0.28);
--nav-bg: rgb(250, 245, 234);
--footer-bg: #ece2cd; /* a touch deeper than --ink for depth */
}
/* Respect OS preference for first-time visitors who haven't
toggled yet (no data-theme attribute set by JS/localStorage) */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]):not([data-theme="light"]) {
color-scheme: light;
--ink: #faf5ea;
--ink-2: #f1e9d8;
--ink-3: #ece2cd;
--hide: #c4a880;
--paper: #221a14;
--paper-dim: #5b4d3d;
--whiskey: #7f4a13;
--whiskey-dim: #7a4816;
--rose: #9c2f45;
--rose-dim: #7d3140;
--rose-text: var(--rose);
--sage: #4f6a45;
--sage-strong: #41573a;
--error: #d13b3b;
--success: #276030;
--shadow: 0 12px 26px -14px rgba(60, 40, 20, 0.28);
--nav-bg: rgb(250, 245, 234);
--footer-bg: #ece2cd;
}
}
@font-face {
font-family: "CleanAmpersand";
src: local("DM Sans"), local("Helvetica Neue"), local("Arial"), sans-serif;
unicode-range: U+0026; /* Match ONLY the & character */
}
:root {
/* Fixed (non-theme-flipping) pair for solid rose-filled buttons/badges.
--paper flips to a DARK color in light mode (right for body text on
the light page background, wrong for text sitting on top of a
mid-tone rose fill) -- these two stay constant across both themes
so button contrast doesn't collapse when the theme switches. */
--on-fill: #f3ead9;
--rose-fill-hover: #612631;
--pride: linear-gradient(90deg, #e0505a, #e8935a, #e8c65a, #5fae7a, #4f8fc7, #9a6bc9);
--font-display: "CleanAmpersand", "Gloock", "Georgia", serif;
--font-body:
"CleanAmpersand", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--container: 1320px;
--radius: 8px;
--radius-lg: 16px;
/* Compatibility aliases.
Later feature work (the Apothecary Quiz in shop.html, plus a few rules
further down this file) was written against these four names, but they
were never actually defined anywhere -- 39 references in total, every one
of them resolving to nothing. An undefined var() in a shorthand makes the
whole declaration invalid, so `border: 1px solid var(--border-color)`
silently fell back to a currentColor border and the radii to square
corners. Defined here as aliases of the real tokens rather than
find-and-replaced at each call site, so they stay theme-aware: --hide and
--paper-dim are both re-declared per theme, and var() resolves at use
time, so these follow dark/light automatically. */
--border-color: var(--hide);
--paper-muted: var(--paper-dim);
--radius-sm: 6px;
--radius-md: var(--radius);
--radius-large: var(--radius-lg);
/* --radius-xl (Build-Your-Own-Box card, Apothecary Quiz modal) and --ink-1
(box-builder thumbnail/checkbox fills, restock modal panels) were the
same story as the block above -- referenced but never defined, so
border-radius silently fell back to square corners and those
backgrounds/checkmarks fell back to transparent/inherited. Aliased here
for the same reason. */
--radius-xl: 24px;
--ink-1: var(--ink);
--bg: var(--ink);
--crimson: var(--error);
--font-heading: var(--font-display);
/* Order-status timeline "step complete" green. Was only ever referenced as
var(--moss), never declared -- two of its three uses had no fallback, so
the active step lost its border and focus ring entirely. Value taken from
the one call site that did carry a fallback, so nothing changes visually
where it already worked. */
--moss: #4a6b5d;
}
/* ---------------------------------------------------------
Z-INDEX BANDS
Everything in this file (and cart.css) should land in one
of these, so a new overlay can be placed without reading
the whole stylesheet:
0-10 in-flow decoration (card badges, gallery dots,
carousel arrows, lightbox chrome)
90-99 viewport-pinned page chrome that any overlay must
be able to cover: .pdp-sticky-bar (90), mobile
.nav-links drawer (99)
100-199 header band: .site-header (100),
.announcement-bar (101), .wish-backdrop (198),
.wish-drawer (199)
200-999 escapes the header: .skip-link (200),
.lang-dropdown (200)
1000+ modal layer: dialog.global-search-modal (1000)
9999 always-on-top: .sw-update-toast, and the cart
drawer's non-popover fallback in cart.css
Real