/* ============ Wadicos - Design Tokens (V1) ============ * * Canonical source. Mirrored in * .claude/skills/wadicos-design-system/SKILL.md * * No other CSS file may declare colors, font sizes, spacing * values, radii, shadows, durations, or font families. Token * names only. * * V1 (foundation tokens) refit per the approved visual-identity * plan §3.A. New typography scale (mega-hero, body-lead), * rationalised ink palette, surface tokens for data-surface * alternation, burgundy-glow shadows, container-wide, plus a * comprehensive legacy-alias block at the foot of :root so every * component + page CSS file continues to resolve token names that * V1 has deprecated. * * Theme architecture: dark palette is the default on :root. * [data-theme="light"] reassigns surfaces, ink, line, gradients, * and shadow tints. Brand action (red/burgundy + cream) is * invariant between themes — the maison signature reads * identically on both grounds. Theme is applied to by * /assets/js/features/shared/theme.js BEFORE first paint via the * inline boot snippet in each page . * ====================================================== */ @layer tokens { :root { /* ============ Palette · Surfaces ============ */ --color-bg: #0a0405; --color-bg-elev: #140609; --color-bg-surface: #1c0a0d; /* Editorial section surfaces — used by data-surface="ink|wine|vellum|cream" alternation. Wine and vellum match the existing bg-elev / bg-surface intent; ink is the deepest dark, cream is the light interlude band that appears once on the home (V3) over the dark theme. */ --color-surface-ink: #0a0405; --color-surface-wine: #140609; --color-surface-vellum: #1c0a0d; --color-surface-cream: #fbe9da; /* Sticky header tint — swaps under [data-theme="light"]. */ --color-header-stuck: rgb(20 6 9 / 0.92); /* Scrollbar surfaces — track + thumb. Token-driven so the chrome adapts when the page switches themes. */ --color-scroll-track: var(--color-bg); --color-scroll-thumb: var(--color-line); /* ============ Palette · Editorial gradients ============ */ --gradient-wine: radial-gradient(ellipse at 50% 0%, #2a0a10 0%, #0a0405 65%); --gradient-ember: radial-gradient(ellipse at 50% 100%, #3a0d14 0%, #0a0405 70%); /* ============ Backdrop image ============ * * The body::before grunge texture is paired with --color-bg. * Light theme reassigns this to /assets/images/light-bg.webp * inside [data-theme="light"]. The asset is preloaded by the * boot script in each page so it lands before paint. */ --bg-image: url("/assets/images/dark-bg.webp"); /* ============ Palette · Ink ============ * Rationalised from four grays to two canonical levels. * Legacy --color-ink-soft and --color-ink-faint alias below. */ --color-ink: #f5e9dc; --color-ink-muted: #a89684; /* ============ Palette · Lines ============ */ --color-line: #3a1b22; /* lifted from #2a141a so it reads against bg-elev */ --color-line-soft: #251015; --color-line-cream: rgb(245 233 220 / 0.12); /* hairline rule on dark */ /* ============ Palette · Brand action (red / burgundy) ============ */ --color-red: #d6232a; --color-red-hover: #b81d24; --color-red-deep: #8e1a1f; /* ============ Palette · Cream pill ============ */ --color-cream: #fbe9da; --color-cream-hover: #f3dac7; /* ============ Palette · Accents ============ * * --color-accent-champagne is the V1 editorial eyebrow colour — * deeper, more aristocratic than the legacy peach. Existing * components that paint with --color-accent-peach continue to * resolve through the legacy-alias block; V2 will swap usage. */ --color-accent-champagne: #d4af7a; --color-accent-peach: #e8a899; /* ============ Palette · Status ============ */ --color-success: #0e8a3e; --color-warning: #c89232; /* ============ Palette · Semantic aliases ============ * * --color-cta-ink: kept brighter than --color-ink so the * cream-on-burgundy CTA cleared WCAG 1.4.3 at 4.5:1 (the * #f5e9dc on #d6232a pair measured ~4.25:1 — under). #fdf8f1 * lifts the warm near-white to ~4.80:1 while preserving the * editorial warmth the brand uses on body ink. */ --color-fg: var(--color-ink); --color-cta-ink: #fdf8f1; --color-cta-soft-ink: #1a0a0e; /* ============ Theme-invariant brand constants ============ * * These tokens paint identical values in BOTH themes by design. * They drive the cream-interlude spotlight bands (.elles, .eux, * .collections, .maisons-rail brand-cta) and the stage cream * surface used by PDP gallery + contact form — surfaces that * keep their look across light/dark theme switches. Defined once * in :root; the [data-theme="light"] block does NOT redefine * them, so they cascade through unchanged. */ --color-brand-burgundy: #7a1e24; --color-brand-burgundy-hover: #5c161b; --color-brand-burgundy-deep: #4a1016; --color-stage-cream: #fbe9da; --color-cream-soft: #d4c4b3; /* warm mid-cream — product overlay subtitles */ --color-stage-ink: #1a0a0e; --color-stage-ink-deepest: #0d0507; --color-glass-ink: #0a0405; /* dark glass base for scrim/overlay over photos */ /* ============ Shadow + highlight physics ============ * * Pure-black shadows and pure-white inset highlights — the same * across themes because they're optical physics, not brand * colour. Five steps for shadows (soft → mid → strong) and two * for highlights (soft / mid). */ --color-shade-soft: rgb(0 0 0 / 0.08); --color-shade-mid: rgb(0 0 0 / 0.35); --color-shade-strong: rgb(0 0 0 / 0.55); --color-highlight-soft: rgb(255 255 255 / 0.10); --color-highlight-mid: rgb(255 255 255 / 0.20); /* ============ Decorative accents ============ * * Single-purpose accents used at most in one or two places, but * tokenised for single-source control. */ --color-accent-gold: #d4a857; /* PDP rating stars (gold leaf) */ --color-accent-amber: #f4c98a; /* editorial eyebrow leading rule */ --color-decor-coral: #d67777; /* .collections decorative SVG curve */ --color-submit-coral-start: #c8474f; /* .essence__submit gradient start */ --color-submit-coral-end: #a8333d; /* .essence__submit gradient end */ /* ============ Trustpilot brand spec (testimonial card) ============ * * Hard pinned to Trustpilot's brand colours — the home page * testimonial cards are a deliberate Trustpilot look-alike per * the comment in product.css. Do NOT swap these for Wadicos * tokens; that defeats the look-alike intent. */ --color-trustpilot-bg: #ffffff; --color-trustpilot-border: #dcdce6; --color-trustpilot-ink: #191919; --color-trustpilot-green: #00B67A; --color-trustpilot-star-glyph: #ffffff; /* ============ Olfactory family swatches (catalogue filters) ====== * * Each family carries a representative colour shown in the * catalogue filter chips. Theme-invariant by design — the swatch * must read the same across light/dark so a family always looks * like itself. */ --swatch-floral: #e8a3b1; --swatch-oriental: #c87f3a; --swatch-boise-oriental: #6b4226; --swatch-boise: #4a2e1a; --swatch-frais: #88c7c1; --swatch-gourmand: #c69b6d; --swatch-chypre: #8b8b3d; --swatch-ambre: #d29b5e; /* ============ Essence section washes (theme-aware) ============ * * The .essence section paints two distinct surfaces per theme: a * full gradient as section ground (--gradient-essence-wash) and a * brushstroke decorative tone (--color-brushstroke). Both flip * under [data-theme="light"]. */ --gradient-essence-wash: linear-gradient(180deg, transparent 0%, rgba(120, 40, 50, 0.18) 100%); --color-brushstroke: rgba(180, 80, 90, 0.18); /* ============ Typography · Families ============ * * V1: Fraunces self-hosted at /assets/fonts/fraunces-*.woff2 * becomes the primary display face. Cormorant Garamond stays * installed and reachable via --font-bridge for editorial * body-display work (legal page section heads, product-card * titles in later passes). Inter remains the body sans. */ --font-display: "Fraunces", "Fraunces Fallback", "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-bridge: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* ============ Typography · Fluid scale ============ * * --fs-mega-hero (NEW) is the editorial hero scale used by V3+ * for the home + maisons + maison + guide heroes — ceiling * 160 px at 1920 px, floor 56 px at 320 px so §1.5 holds. * * --fs-hero is the secondary hero (PDP product nameplate, * /boutique/ hero) — ceiling 112 px. * * --fs-h3 floor dropped from 1.25rem to 1.125rem (~18 px) so * the long EN /guide/ H3 set fits 2 lines at 375 px width * without rewriting every heading. * * --fs-body-lead (NEW) is the magazine lead-paragraph scale * (1.3 × body) used by V5+ for brand-story first paragraphs. */ --fs-mega-hero: clamp(3.5rem, 2rem + 8vw, 10rem); --fs-hero: clamp(2rem, 1.2rem + 4vw, 6.5rem); /* --fs-display and --fs-h2 are HELD at the pre-V1 values in V1 to honour the §1.5 two-line headline rule. The plan §3.A1 spec widened both clamps; in practice those wider clamps regressed §1.5 at 768 px on the subscribe-card h2 (18 pages: "Recevoir les nouveautés / et les pièces rares.") and at 768 px on the .essence / .signature / .maisons-callout section headings (uppercase + tracking + clamp peak overflowed the existing column widths). The wider editorial scale travels into V3+ via --fs-mega-hero (only wired by V3 component classes), so the visual lift is not lost — it is just deferred until the component pass concurrently relaxes the column widths. Until then: --fs-display + --fs-h2 stay at pre-V1. Pre-V1 values reproduced here verbatim. */ --fs-display: clamp(1.5rem, 1rem + 2.5vw, 3.75rem); --fs-h2: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); --fs-h3: clamp(1.125rem, 1.0625rem + 0.3vw, 1.375rem); --fs-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); --fs-body-lead: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); --fs-small: 0.875rem; --fs-eyebrow: 0.75rem; --fs-badge-num: clamp(3rem, 2rem + 4vw, 5rem); /* ============ Typography · Leading ============ */ --lh-mega-hero: 0.92; --lh-display: 1.02; --lh-h2: 1.12; --lh-tight: 1.28; --lh-body: 1.6; --lh-body-lead: 1.5; /* ============ Typography · Tracking ============ */ --tracking-mega: -0.035em; /* NEGATIVE at mega scale, per references */ --tracking-display: -0.022em; --tracking-h2: -0.015em; --tracking-section: 0.06em; --tracking-eyebrow: 0.18em; /* ============ Spacing · Fluid scale ============ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: clamp(3rem, 2rem + 4vw, 6rem); /* default section padding */ --space-9: clamp(4rem, 3rem + 5vw, 8rem); --space-10: clamp(6rem, 4rem + 8vw, 12rem); /* hero / interlude rhythm */ --space-11: clamp(8rem, 5rem + 10vw, 16rem); /* full-bleed hero interlude (V3+) */ /* ============ Layout ============ */ --container-max: 87.5rem; --container-narrow: 48rem; --container-wide: 100rem; /* NEW — editorial hero at 1920 */ --gutter: clamp(1rem, 4vw, 3rem); --grid-gap: clamp(1rem, 2vw, 1.75rem); /* ============ Radii ============ * * Section-level radii ≥ 100px are retired in V1. The legacy * 100 px capsule on .section--surface was the worst single * gesture in the audit; it does not appear in any reference. * Replacement: hairline rule above/below + flat data-surface * — implemented in V2 components, but tokens are pinned now * so no other CSS introduces a capsule section radius. */ --radius-sm: 4px; --radius-md: 8px; --radius-card: 28px; /* NEW canonical name for card-corner radius */ --radius-frame: 25px; /* V3 — editorial frame radius used by .hero__frame (non-home page heroes), .brand-hero__frame, .guide-hero__frame. The home hero drops the frame entirely in V3; the other three pages keep it. */ --radius-2xl: 22px; /* catalogue-hero embellishment radius */ --radius-3xl: 28px; /* catalogue-hero outer card radius (matches --radius-card) */ --radius-pill: 999px; /* ============ Lines ============ * * Magazine body-paragraph leading. Used by catalogue-hero, * maisons, contact, and the catalogue page subhead. */ --lh-relaxed: 1.7; /* ============ Shadow tints — auxiliary ============ */ --shadow-soft: 0 1px 0 rgb(0 0 0 / 0.04); /* ============ Elevation ============ * * --shadow-card-dark replaces the black-on-black --shadow-card, * which was invisible against the near-black ground. The new * shadow is a burgundy glow — lifts cards visibly on dark, then * the light-theme override flips it to a muted umber. */ --shadow-card-dark: 0 16px 40px rgb(214 35 42 / 0.18); --shadow-card-light: 0 12px 32px rgb(122 30 36 / 0.12); --shadow-lifted: 0 20px 48px rgb(0 0 0 / 0.55); --shadow-cta: 0 8px 24px rgb(214 35 42 / 0.32); --shadow-cta-hover: 0 12px 32px rgb(214 35 42 / 0.45); --shadow-glow-soft: 0 0 60px rgb(214 35 42 / 0.15); /* ============ Motion ============ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 220ms; --dur-base: 360ms; --dur-slow: 640ms; /* ============ Z-index ============ */ --z-header: 30; --z-overlay: 40; --z-toast: 60; /* ====================================================== * * Legacy-alias block · CRITICAL SAFETY MECHANISM * * Every token name that V1 deprecates but that components or * pages CSS files still reference must resolve through an * alias declared HERE — so V1 ships without touching any * other CSS file. V2 (components) will gradually retire the * legacy names and remove these aliases. * * The grep used to build this list: * grep -rh -oE 'var\(--[a-z0-9-]+\)' \ * website/assets/css/components/ website/assets/css/pages/ \ * | sed -E 's/var\((--[a-z0-9-]+)\)/\1/' | sort -u * * 81 unique token names were referenced. The 4 legacy * deprecations are listed below; every other referenced name * is canonical in the new block above. * ====================================================== */ /* The two ink levels (ink-soft, ink-faint) that V1 rationalised away. Components still use them; they map onto the new pair. */ --color-ink-soft: var(--color-ink); --color-ink-faint: var(--color-ink-muted); /* The legacy hero size token. V1 renamed to --fs-mega-hero; any remaining .hero__megatype or similar usage points here. */ --fs-mega: var(--fs-mega-hero); /* The legacy card-corner radius name (still referenced by .brand-card, .subcollection-card, .product-card__overlay, etc.). Maps onto the new canonical --radius-card. */ --radius-lg: var(--radius-card); --radius-xl: var(--radius-card); /* The legacy generic card shadow. Pre-V1 it resolved to a black-on-black wash that read as nothing on the dark ground. V1 redirects to the new burgundy-glow shadow so every existing .card / .product-card / .brand-card / .subscribe-card picks up the lift without touching its CSS. */ --shadow-card: var(--shadow-card-dark); } /* ============ Light theme overrides ============ * * Applied when /assets/js/features/shared/theme.js sets * [data-theme="light"] on pre-paint. Every new V1 * token gets its light-theme value too; legacy aliases inherit * from the dark block above and naturally fall through. * * Source palette (the Wadicos light-mode reference card, * unchanged from pre-V1): * Warm Ivory F6F1EA · primary ground * Oyster Beige EFE4D6 · surface * Champagne Beige E7D6C1 * Rose Blush D7A79A · wine vignette source * Burgundy Accent 7A1E24 · CTA + heading * Premium Gold D4B88C · accent gold * Champagne E7CDB3 · ember vignette source * Peach Copper C78F76 * Warm Taupe B89B8A · ink-muted * Soft Mocha 8D7566 * Soft White FAF8F6 · cream pill * Light Sand F2ECE6 · alt surface * Silver Beige E4DCD2 · soft line * Warm Gray D6D0C8 · line * Mocha Gray 7C736D · faint ink * ============================================== */ [data-theme="light"] { /* ============ Persian Red palette (light-theme only) ============ * * Eleven-stop scale driving every semantic token in this block. * Strong shades (700-950) carry primary actions, ink, and focus * rings; softer shades (50-200) carry surfaces, hairlines, and * elevated panels. The 600 stop is the brand red at 32 % alpha, * exposed as --shadow-glow-soft for halo/glow tones. */ --color-persian-red-50: #fef2f2; --color-persian-red-100: #fee2e3; --color-persian-red-200: #fecacc; --color-persian-red-300: #fca5a8; --color-persian-red-400: #f87176; --color-persian-red-500: #ef444b; --color-persian-red-600: #d6232a52; /* brand red at 32 % α — glow tone */ --color-persian-red-700: #b91c22; --color-persian-red-800: #991b20; --color-persian-red-900: #7f1d21; --color-persian-red-950: #450a0c; /* ============ Surfaces ============ * * Soft red-tinted washes; never harsh white. Body wash is the * softest tint, elevated cards lift a hair lighter, surface panels * deepen to red-100 for cards / dropdowns / drawers. */ --color-bg: var(--color-persian-red-50); /* #fef2f2 — page wash */ --color-bg-elev: #fff8f8; /* near-white red-tinted, sits above bg */ --color-bg-surface: var(--color-persian-red-100); /* #fee2e3 — deepest soft surface */ /* data-surface band tokens (used by section[data-surface="…"]) — retinted so the rhythm reads as a single tonal family. */ --color-surface-ink: var(--color-persian-red-100); /* deepest band — was deepest cream */ --color-surface-wine: var(--color-persian-red-50); --color-surface-vellum: #fff8f8; --color-surface-cream: #fff8f8; /* near-white red-tinted, NOT pure white */ /* Sticky-header tint — translucent red-50 so the header glass dissolves into the page wash above. */ --color-header-stuck: rgb(254 242 242 / 0.92); /* Scrollbar chrome — track quietly on bg-surface, thumb on red-300 so it's discoverable without screaming. */ --color-scroll-track: var(--color-persian-red-100); --color-scroll-thumb: var(--color-persian-red-300); /* Editorial gradients — soft red-tinted vignettes replacing the Rose Blush + Champagne washes. Peaks at red-200/300 fading into the page red-50, so they read as gentle ambient lighting rather than saturated colour blocks. */ --gradient-wine: radial-gradient(ellipse at 50% 0%, var(--color-persian-red-200) 0%, var(--color-persian-red-50) 65%); --gradient-ember: radial-gradient(ellipse at 50% 100%, var(--color-persian-red-300) 0%, var(--color-persian-red-50) 70%); /* Backdrop image — the official asset. CRITICAL: this URL must remain pointed at the existing file. The body::before rule that paints it is theme-neutral. Do NOT layer any overlay / tint / blur onto this image. */ --bg-image: url("/assets/images/light-bg.webp"); /* ============ Ink ============ * * Body text uses red-950 (~17:1 on red-50 — AAA at all sizes). * Muted body uses red-900 (~9:1 — still AAA). Headings cascade * down to var(--color-red) via the [data-theme="light"] h1-h6 * override in base.css; that picks up red-700 automatically. */ --color-ink: var(--color-persian-red-950); --color-ink-muted: var(--color-persian-red-900); /* ============ Lines ============ * * Soft pink hairlines — visible but not loud. The cream hairline * stays a low-opacity brand red so the burgundy hint persists on * cream-interlude rows that are theme-invariant. */ --color-line: var(--color-persian-red-200); --color-line-soft: var(--color-persian-red-100); --color-line-cream: rgb(185 28 34 / 0.12); /* red-700 hairline on cream */ /* ============ Brand action — Persian Red CTA family ============ * * Primary action at red-700, hover deepens to red-800, active to * red-900. All three clear AA against red-50 (the body wash) and * deliver clean WCAG focus contrast on white text. */ --color-red: var(--color-persian-red-700); --color-red-hover: var(--color-persian-red-800); --color-red-deep: var(--color-persian-red-900); /* ============ Cream pill — secondary CTA ============ * * Pale on pale. The pill body is whitest-still-tinted; hover * deepens by one notch to red-50 for a quiet press affordance. */ --color-cream: #fff8f8; --color-cream-hover: var(--color-persian-red-50); /* ============ Accents ============ * * Champagne is the established editorial accent (eyebrows, * decorative rules) — kept intact because it is not a "random new" * colour, it is a load-bearing brand voice. Peach legacy retired * to coral red-500 so the accent stays on-palette. */ --color-accent-champagne: #a07a3a; /* deeper champagne — ~4.6:1 on red-50 */ --color-accent-peach: var(--color-persian-red-500); /* CTA inks — text colours against the CTA fills. */ --color-cta-soft-ink: var(--color-persian-red-950); /* dark on cream pill */ --color-cta-ink: var(--color-cream); /* cream on red pill */ /* ============ Shadows ============ * * Red-tinted soft drops. The "card-light" / "card-dark" names are * shadow STRENGTHS, not theme labels (legacy nomenclature). All * five tokens use red-700 rgb(185 28 34) at matching opacities to * the pre-migration burgundy stack, so the visual lift stays the * same. --shadow-glow-soft hands off to the red-600 translucent * stop directly so the glow reads as the brand halo. */ --shadow-card-dark: var(--shadow-card-light); --shadow-card-light: 0 12px 32px rgb(185 28 34 / 0.12); --shadow-lifted: 0 20px 48px rgb(185 28 34 / 0.16); --shadow-cta: 0 8px 24px rgb(185 28 34 / 0.24); --shadow-cta-hover: 0 12px 32px rgb(185 28 34 / 0.32); --shadow-glow-soft: 0 0 60px rgb(214 35 42 / 0.14); /* ============ Essence section washes — light variants ============ * * Redefine the dark-default essence gradient + brushstroke in * lighter peach/rose tones for the light theme. */ --gradient-essence-wash: linear-gradient(180deg, transparent 0%, rgba(248, 220, 215, 0.18) 100%); --color-brushstroke: rgba(232, 168, 153, 0.22); } }