/* ═══════════════════════════════════════════════════════════════ VIVA SCENTA DESIGN TOKENS — system "Honest White" Locked 2026-09-29 (vs-sitemap-and-sections.md header; colours vs-info / refs §3.1). White shell, #353B48 ink, terracotta brand accent; per-perfume accent only on that perfume's PDP + card. The only file a brand rewrites wholesale (PIPELINE §5). ═══════════════════════════════════════════════════════════════ */ :root{ /* shell */ --bg: #ffffff; /* page */ --bg-alt: #ffffff; /* alternate bands stay white; rhythm comes from hairlines */ --surface: #ffffff; /* cards (legacy) */ --surface-2: #FAFAF8; /* warm off-white: product cards + soft panels against the white page */ --line: #E4E6EA; /* hairline borders */ --ink: #353B48; /* body text */ --ink-soft: #6B7280; /* secondary text */ --ink-deep: #050505; /* deep text / near-black */ --stone: #6B7280; /* quiet labels, eyebrows — same as ink-soft: 4.8:1 on white, the floor for small text */ --brand: #B14333; /* terracotta — wordmark, logomark, primary CTA */ --highlight: #B14333; /* on-site text accents */ --on-brand: #ffffff; /* text/icons on the red bar */ --brand-hover: color-mix(in srgb, var(--brand), black 8%); /* CTA hover: the same hue, a touch deeper (Faiz 29 Sep) */ --on-brand-line: rgba(255,255,255,.2); /* hairline dividers on the red bar */ /* per-perfume accents (measured from the shipped 2ml labels, vs-info) */ --aura: #7b282b; --contra: #44726b; --cunoor: #627956; --iceberg: #4f6e8c; --rogue: #8f5a35; /* type */ --font-display: 'Inter', system-ui, sans-serif; /* H2–H3 */ --font-hero: 'Inter', system-ui, sans-serif; --head: var(--brand); /* headline colour = VS red (Faiz 29 Sep) */ /* hero / editorial statements */ --font-body: 'Inter', sans-serif; /* body, UI, price */ --font-mark: 'Inter', system-ui, sans-serif; /* Inter only (Faiz 29 Sep) */ --track-wide: .28em; --track-label: .18em; --track-nav: .08em; --track-hero: -.02em; /* display: tight */ --track-h2: -.015em; /* type scale (desktop) */ /* fluid ramp, ~1.25 steps: label .75 · small .875 · body 1 · h3 1.125 · lead 1.125 · h2 1.5→2.25 · hero 2.5→4.25 (max ≤ 2.5× min) */ --fs-hero: clamp(2.5rem, 1.4rem + 3.6vw, 4.25rem); --fs-h2: clamp(1.5rem, 1.1rem + 1.25vw, 2.25rem); --fs-h3: 1.125rem; --fs-lead: 1.125rem; --fs-body: 1rem; --fs-small: 0.875rem; --fs-label: 0.75rem; --lh-body: 1.7; --lh-display:1.15; /* space (0.5rem base) */ --s1:0.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4rem; --s7:6rem; --pad-x: clamp(1.25rem, 4.5vw, 3rem); /* page gutter */ --max-w: 73.75rem; /* misc */ --radius: 0; --shadow-soft: 0 0.625rem 1.875rem rgba(53,59,72,.07); --shadow-card: 0 0.0625rem 0.125rem rgba(53,59,72,.04), 0 0.75rem 2rem rgba(53,59,72,.08); /* cards at rest / soft panels */ --shadow-hover: 0 0.125rem 0.25rem rgba(53,59,72,.05), 0 1.25rem 3rem rgba(53,59,72,.12); /* lifted card */ /* motion (Emil): strong ease-out for entrances, ease for colour; nothing over 600ms */ --ease-out: cubic-bezier(.23, 1, .32, 1); --dur-1: .16s; /* press */ --dur-2: .3s; /* hover · swap · accordion */ --dur-3: .5s; /* scroll reveal · crossfade */ --dur-hero: .6s; /* first-paint hero */ /* house default: any page without a perfume accent resolves to the brand */ --accent: var(--brand); --h2: var(--accent); } /* per-perfume scoping: / . --h2 is the ONE source of truth for a perfume's colour (title, PDP CTA, card rule). */ [data-accent="aura"] {--accent:var(--aura)} [data-accent="contra"] {--accent:var(--contra)} [data-accent="cunoor"] {--accent:var(--cunoor)} [data-accent="iceberg"] {--accent:var(--iceberg)} [data-accent="rogue"] {--accent:var(--rogue)} [data-accent]{--h2:var(--accent);--tint:color-mix(in srgb, var(--accent) 12%, #ffffff)}