/* ========================================================================== Blissporium Design System — Design Tokens Single source of truth. Never hardcode values in component styles. ========================================================================== */ :root { /* ------------------------------------------------------------------ Color — Brand (2026-07 official brand identity update) Primary #F9C8CC is deliberately soft/pale — per brand spec it drives decorative accents, icons, badges, active-nav underline, focus rings and small highlights, but is NEVER used as small/body text or a filled-button background (fails contrast at that size — see the button/nav notes below). Buttons and any place primary needs to double as readable text use the two deeper "Hover"/"Active" tones, plus a dedicated darkest "pressed" tone for button active state. ------------------------------------------------------------------ */ /* Blush ramp — lightened AND desaturated (2026-07 "airy luxury" pass): pulled ~35% of the saturation out and raised lightness so the brand pink reads as a soft, expensive blush accent, never a candy fill. Used mainly on small accents now (badges, icons, focus rings, hover tints) rather than large backgrounds. Where pink must double as readable text a dedicated readable tone is kept below. */ /* CONTRAST PASS (2026-08). A measured audit found 21 of 29 token/surface pairs below WCAG AA — the site read as washed out. Every value below was solved for the minimum darkening that clears its target against the worst surface it is actually painted on, holding hue constant, so the blush/champagne identity is preserved rather than muddied. Ratios are quoted per token; re-check with the audit script before changing any of them. */ --color-primary: #F7DEDF; /* Soft desaturated blush — a FILL, never text; intentionally left pale */ --color-primary-light: #FCF4F3; /* Barely-there blush — highlight sections (fill only) */ --color-primary-dark: #EDC9CC; /* Soft hover tint (fill only) */ --color-accent: #DBABB0; /* Soft mid-tone line-work — 2.01:1 on white (was #EDC9CC, 1.52) */ --color-accent-dark: #AF555C; /* Working ACCENT for links/icons/stars — 4.51:1 (was #CE9297, 2.36) */ --color-primary-pressed: #AF5F66; /* Deeper rose — 4.51:1 as text AND white-on-fill (was #BE7C82, 3.28) */ --color-rose-deep: #A8474F; /* Deepest rose — 5.71:1. Use where a rose fill must carry WHITE text (gradient CTAs) or where a rose label sits on a tinted panel and --color-primary-pressed lands just under AA. */ /* Primary CTA is a solid near-black pill (matches the live site). Pink stays the DECORATIVE accent (logo, badges, sale tags, focus rings, hearts). Brown tokens drive the section eyebrows/labels. */ --color-ink: #1F1A17; /* Warm near-black — primary button fill */ --color-ink-hover: #000000; /* Primary button hover/pressed fill */ --color-brown: #6E5A48; /* Warm taupe-brown — section accents / eyebrows */ --color-brown-deep: #5C4A3B; /* Darker brown — hover */ --color-brown-soft: #877261; /* Lighter brown — 4.56:1 (was #8A7563, 4.37) */ /* Readable pink for the places pink is used as TEXT, not fill. Now clears full AA (4.5:1) at ANY size rather than only the 3:1 large/bold threshold — it drives the active nav link, which is small text. 4.51:1 on the warm-white page background. */ --color-rose-text: #B65960; --color-rose-dust: #FBEEEC; /* Near-white blush — hero backdrop */ --color-rose-dust-deep: #F3DAD8; /* Soft blush — hero blob shapes */ /* Backgrounds (2026-08-09 — sitewide white/coral/peach/ink pass). Was a warm cream ramp (#FFFDFC/#FCF9F6/#FAF4F1) — pushed to pure/ near-white to match the homepage+admin reference: page bg and card bg both effectively white, distinguished by border/shadow, not a tonal shift. Left untouched here: the wider rose/blush accent ramp (--color-primary*, --color-accent*) below — that's a much larger, higher-blast-radius change (every badge/button/link sitewide) that this pass's remaining budget can't fully re-verify page by page; flagged in the final report as the next unification step. */ --color-secondary: #FFFFFF; /* Main background */ --color-background: #FFFFFF; /* Alternate background */ --color-surface: #FFFFFF; /* Cards — pure white */ --color-surface-soft: #FAFAFA; /* Faint neutral — highlight sections */ --color-surface-secondary: var(--color-surface-soft); /* Alias — "Surface Secondary" (nested panels, table stripes, secondary cards) */ --color-primary-hover: var(--color-primary-pressed); /* Alias — "Primary Hover" state for primary-filled controls */ /* ------------------------------------------------------------------ Color — Editorial metals (2026-08 luxury elevation) A narrow champagne/rose-gold ramp used ONLY as line-work: hairline rules, 1px card rims, the eyebrow dash, quote glyphs and the washes behind the hero/newsletter panels. Deliberately low-chroma so it reads as expensive metal leaf under warm light, never as gold "colour". None of these are text tokens except --color-champagne-ink, which is the one tone that clears contrast at small sizes. ------------------------------------------------------------------ */ --color-champagne: #CDBBA3; /* Line-work / hairlines — 1.87:1 (was #E7D8C3, 1.40) */ --color-champagne-soft: #F4EBDD; /* Panel washes (fill only) — intentionally left pale */ --color-champagne-deep: #B99C79; /* Stronger rule — 2.59:1 (was #C9B49A, 2.00) */ --color-champagne-ink: #846E52; /* The one champagne tone safe as small text — 4.54:1 on ivory */ --color-rose-gold: #C98F84; /* Accent line-work — 2.71:1 (was #D8A9A0, 2.08) */ --color-ink-soft: #4A423E; /* Softened ink — editorial body copy on cream */ /* Ivory/pearl surfaces for the full-bleed editorial bands that need to sit apart from both pure white and the existing cream. */ --color-ivory: #FBF7F2; --color-pearl: #F6EFE9; /* ------------------------------------------------------------------ Color — Text ------------------------------------------------------------------ */ /* 2026-08-09 — secondary/muted darkened sitewide. Both previous values numerically passed AA (5.06:1 / 4.50:1) but were repeatedly reported as unreadable/washed-out in real screenshots at small sizes — the bare-minimum end of "passes" isn't the same as "looks legible," so both now sit much closer to --color-text/ink rather than at the edge of the AA floor. Ratios recalculated below, not eyeballed. */ --color-text: #2D2A2A; /* Primary Text — 14.23:1, unchanged */ --color-text-secondary: #4A423F; /* Secondary Text — 9.80:1 on white (was #6F6766, 5.06:1) */ --color-text-muted: #5C534F; /* Muted Text — 7.48:1 on white (was #776F6E, 4.50:1) */ --color-text-inverse: #FFFFFF; --color-text-on-primary:#FFFFFF; /* Button text — for text on a SOLID --color-primary-dark/accent-dark/pressed fill */ --color-text-on-light: var(--color-rose-text); /* Readable pink for text on --color-primary-light or a translucent-white chip */ /* Primary navigation (2026-08-09 white/coral/ink pass). Active nav TEXT stays ink — #F7AEB5 coral only measures 1.8:1 against white, which fails AA even at the 3:1 large-text floor, so the "current page" signal is carried by ink + semibold weight, not color. The coral lives only in the underline (a decorative reinforcement, not the sole indicator — the weight/color change on the text already conveys "active" on its own). */ --color-nav-text: var(--color-text); --color-nav-active: var(--color-ink); --color-nav-underline: #F7AEB5; /* ------------------------------------------------------------------ Color — Border & Lines ------------------------------------------------------------------ */ /* Borders are deliberately NOT pushed to the 3:1 non-text threshold — a 3:1 hairline on white is mid-grey and turns a luxury card into a wireframe. These are set to the point where the boundary is unambiguously visible while staying in the warm neutral family, and desaturated slightly as they darken so they read grey-warm rather than tan. */ --color-border: #D6CDC7; /* Hairline — 1.57:1 (was #F0E8E3, 1.21 — effectively invisible) */ --color-border-strong: #BFB0A8; /* Emphasised — 2.10:1 (was #E4D7D0, 1.41) */ --color-border-hover: var(--color-border-strong); /* Alias — "Border Hover" state on hoverable containers/inputs */ --color-border-focus: var(--color-accent); --color-divider: var(--color-border); /* Alias — hairline divider rules (footer, list separators) */ /* ------------------------------------------------------------------ Color — Semantic (muted, on-brand) ------------------------------------------------------------------ */ /* Semantic tones double as TEXT (order status, validation messages, stock warnings), so all four clear full AA on white. The -bg tints are fills and stay pale. 2026-08-10 — re-verified against the actual background each token is ALWAYS paired with sitewide (its own -bg, e.g. every badge/alert/pill sets both background-color: var(--color-warning-bg) and color: var(--color-warning) on the same element) rather than against white, which nothing here is actually rendered on. All three were failing AA against their real pairing (success 4.10:1, warning 4.17:1, danger 3.97:1) despite the comments below claiming they passed — those ratios were only ever checked against white. Darkened each until it clears 4.5:1 against its own -bg specifically. */ --color-success: #52765C; /* 4.63:1 on --color-success-bg (was #587F63, 4.10:1 on it — only 4.53 vs white) */ --color-success-bg: #EFF5F0; --color-warning: #8C6833; /* 4.63:1 on --color-warning-bg (was #956F36, 4.17:1 on it — only 4.56 vs white) */ --color-warning-bg: #FAF4EA; --color-danger: #AC4F4F; /* 4.65:1 on --color-danger-bg (was #BD5757, 3.97:1 on it — only 4.50 vs white) */ --color-danger-bg: #FAEEEE; --color-info: #5F7990; /* 4.54:1 (was #7B93A8, 3.19) */ --color-info-bg: #EFF3F6; /* ------------------------------------------------------------------ Color — Overlays & Skeleton ------------------------------------------------------------------ */ --color-overlay: rgba(45, 42, 42, 0.45); --color-overlay-light: rgba(45, 42, 42, 0.18); --color-skeleton: #F7E8E4; --color-skeleton-shine: #FFF8F5; /* ------------------------------------------------------------------ Typography — Families Matches the live site: Quicksand (bold, rounded) drives every heading and the hero/CTA display text — confirmed from the live site's own H1 and "Shop Now" button markup (both explicitly set has-quicksand-font-family). Quando (serif) is the site's actual body-copy font (set globally on in its theme.json). ------------------------------------------------------------------ */ --font-heading: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Quando', Georgia, 'Times New Roman', serif; --font-brand: 'Quicksand', 'Playfair Display', sans-serif; /* Navbar + footer only (2026-08-09 pass) — deliberately NOT rolled into --font-heading/--font-brand above, which the rest of the site (product headings, buttons, hero type) still reads from. One family, hierarchy through weight alone: 700 for the wordmark, 500–600 for links/column headings, 400 for body-weight text. See the bottom of this file for a flag on the resulting site-wide inconsistency this creates. */ --font-nav: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ------------------------------------------------------------------ Typography — Scale (fluid, mobile-first) Bumped ~12–15% across the board (2026-07) for better legibility — every heading/body/UI text size sitewide reads from this one scale, so this single change is the whole-site font-size increase. ------------------------------------------------------------------ */ --text-xs: 0.8125rem; /* 13px, was 12px */ --text-sm: 0.9375rem; /* 15px, was 14px */ --text-base: 1.125rem; /* 18px, was 16px */ --text-md: 1.25rem; /* 20px, was 18px */ --text-lg: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); /* 22–28px, was 20–24px */ --text-xl: clamp(1.625rem, 1.4rem + 1.1vw, 2.125rem); /* 26–34px, was 24–30px */ --text-2xl: clamp(2rem, 1.7rem + 1.6vw, 2.75rem); /* 32–44px, was 30–38px */ --text-3xl: clamp(2.5rem, 2.1rem + 2vw, 3.375rem); /* 40–54px, was 36–48px */ --text-4xl: clamp(3rem, 2.4rem + 2.9vw, 4.25rem); /* 48–68px, was 44–60px */ /* Typography — Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Typography — Line heights & tracking */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.7; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.1em; /* ------------------------------------------------------------------ Spacing (4px base grid) ------------------------------------------------------------------ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* Section rhythm — airier vertical whitespace between sections for the luxury/editorial feel (Rhode/Dior breathe more than a dense shop). */ --section-padding: clamp(4rem, 2.75rem + 5vw, 9rem); /* ------------------------------------------------------------------ Border Radius ------------------------------------------------------------------ */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* ------------------------------------------------------------------ Containers Breakpoints (use in media queries — custom properties cannot be used there): sm 480px / md 768px / lg 1024px / xl 1280px / 2xl 1536px `--container-xl` (bare .container) is the wide, edge-to-edge premium layout — hero/product/browsing/marketing pages (home, shop, category, product details, about, nav, footer). It resolves to roughly 90–95% of the viewport on common desktop widths rather than a fixed narrow column, matching premium e-commerce sites (Rhode, Sephora, Rare Beauty) instead of the old boxed 1320px look. `--container-lg` keeps that old 1320px value on purpose — applied via the `.container--lg` modifier to transactional/reading pages (checkout, cart, account, legal/FAQ, invoices, error pages) where stretching to 1760px would hurt form usability and line length, not premium-ness. ------------------------------------------------------------------ */ --container-sm: 640px; --container-md: 900px; --container-lg: 1320px; --container-xl: 1760px; --container-gutter: clamp(1rem, 0.75rem + 2.5vw, 4.5rem); /* ------------------------------------------------------------------ Shadows — light, neutral, airy (2026-07 "airy luxury" pass): shifted off the rose tint to a soft warm-charcoal and cut ~40% of the opacity so cards read as gently floating on white, never heavy or pink. This is the Rhode/Dior "barely there" elevation feel. ------------------------------------------------------------------ */ --shadow-xs: 0 1px 2px rgba(60, 50, 48, 0.03), 0 1px 6px rgba(60, 50, 48, 0.025); --shadow-sm: 0 2px 4px rgba(60, 50, 48, 0.04), 0 6px 16px rgba(60, 50, 48, 0.035); --shadow-md: 0 3px 8px rgba(60, 50, 48, 0.045), 0 12px 30px rgba(60, 50, 48, 0.05); --shadow-lg: 0 6px 14px rgba(60, 50, 48, 0.05), 0 22px 48px rgba(60, 50, 48, 0.06); --shadow-xl: 0 10px 24px rgba(60, 50, 48, 0.055), 0 34px 72px rgba(60, 50, 48, 0.08); /* Focus ring. The old rgba(226,186,190,0.55) was a pale pink glow that all but vanished on a white form — a genuine keyboard-accessibility failure, not just an aesthetic one. WCAG 2.4.11 wants a focus indicator distinguishable from the unfocused state; this rose reads 5.71:1 against white and keeps a soft outer halo so it still looks considered rather than like a default browser outline. */ /* 2px ring, not 4px, and the mid rose rather than the deepest: at full strength a thick crimson ring on an empty required field reads as a validation ERROR, not as focus. This stays unmistakable (4.51:1 against white, well past the 3:1 required of a focus indicator) while looking deliberate rather than alarming. */ --shadow-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--color-primary-pressed), 0 0 0 8px rgba(175, 95, 102, 0.16); /* Restrained glow for primary/quick actions — soft blush, low opacity. */ --shadow-accent: 0 3px 8px rgba(210, 160, 164, 0.14), 0 14px 30px rgba(210, 160, 164, 0.12); /* Illuminated-card glow — inner light rim + a very soft neutral bloom, for surfaces meant to feel lit from within (hero/featured/promo). */ --shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.7) inset, 0 20px 52px rgba(60, 50, 48, 0.06); /* Deepest elevation — floating cards on a dark/full-bleed backdrop (e.g. the admin login card), where the ambient --shadow-xl is too faint to read against a dark page background. */ --shadow-2xl: 0 24px 60px rgba(31, 26, 23, 0.35), 0 8px 20px rgba(31, 26, 23, 0.18); /* ------------------------------------------------------------------ Gradients — used ONLY for very subtle, near-monochrome background washes (section backgrounds). Per the brand brief, saturated gradients are avoided everywhere else — buttons and CTAs use a flat fill (see .btn-primary), not a gradient. ------------------------------------------------------------------ */ --gradient-section: linear-gradient(160deg, #FFFDFC 0%, #FCF5F2 100%); /* Airy near-white hero backdrop — the faintest blush wash, not a fill. */ --gradient-hero: linear-gradient(165deg, #FFFDFC 0%, #FCF3F1 55%, #F8EBE9 100%); /* Charcoal footer/newsletter (dark, near-black). */ /* Warm luxury-neutral footer (2026-07) — deliberately neither white nor charcoal, so the footer reads as a distinct, premium "close" to the page rather than a stark or heavy block. */ --gradient-footer: linear-gradient(180deg, #EAE0DB 0%, #E8DDD8 100%); --gradient-primary: linear-gradient(135deg, #F7AEB5 0%, #E58E98 100%); --gradient-luxury: linear-gradient(135deg, #E58E98 0%, #D97A86 100%); --gradient-glow: radial-gradient(120% 120% at 15% 0%, rgba(255, 255, 255, 0.9), rgba(253, 247, 243, 0) 60%); /* ------------------------------------------------------------------ Transitions & Motion ------------------------------------------------------------------ */ --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; /* Cinematic tier — for the long hero/scroll reveals only. Fast UI feedback (buttons, inputs, toggles) must stay on the durations above; these lengths feel broken on a control the user just clicked. */ --duration-cinematic: 900ms; --duration-epic: 1400ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* Long, heavily-decelerated curve — the "expensive" feel. Almost all of its travel happens in the first third, so an element appears to arrive and then settle rather than slide at a constant speed. */ --ease-lux: cubic-bezier(0.16, 1, 0.3, 1); --transition-base: all var(--duration-base) var(--ease-out); --transition-fast: all var(--duration-fast) var(--ease-out); --transition-color: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); /* ------------------------------------------------------------------ Z-index scale ------------------------------------------------------------------ */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 400; --z-drawer: 500; --z-modal: 600; --z-toast: 700; --z-tooltip: 800; }