/* ========================================================================== tokens.css — PurePleasure design tokens -------------------------------------------------------------------------- The SINGLE source of truth for colour, type, form, motion and spacing. Reconciled to the approved v2 homepage prototype (purepleasure-homepage-v2-prototype.html): where the prototype differed from the old tokens we adopt the prototype's values, keeping our token NAMES. This is the ONLY stylesheet permitted to hold raw hex / raw numeric values. ========================================================================== */ :root { /* ---------------------------------------------------------------------- COLOUR (from the approved prototype) ---------------------------------------------------------------------- */ /* Core */ --pp-plum: #48193C; /* headlines, deep brand — prototype --plum */ --pp-plum-deep: #3A1530; /* darkest sections/footer — prototype --dark */ --pp-pink: #F0409A; /* primary accent, CTAs, active — prototype --pink */ --pp-toggle-fill: #B01167; /* storefront-toggle active slider — deepened so white text hits AA */ --pp-cta: var(--pp-toggle-fill); /* CTA fill behind white text — Her #B01167 (6.73:1). GOTCHA: this var() collapses to a concrete #B01167 HERE at :root and inherits down; body.theme-him overriding --pp-toggle-fill does NOT re-resolve it, so --pp-cta is re-declared inside body.theme-him too. Any indirect token like this must be re-declared in every scope that overrides its source. */ --pp-pink-light: #FD79A8; /* lighter pink accents/hover */ --pp-pink-pale: #FFEDF6; /* soft pink surface (icons, gradients) */ --pp-pink-logo: #FA67CD; /* logo mark only */ --pp-purple: #8A3568; /* gradient partner, CTA hover, badges */ --pp-purple-light:#C47BA8; /* gradient terminus */ --pp-teal: #5ECECD; /* horns / accent dots only, never a fill */ /* Surfaces */ --pp-blush: #FDEEF4; /* default page background — prototype --blush */ --pp-blush-light: #FBF4F7; /* alternating section bg — prototype --blush-soft */ --pp-grey-light: #FAF0F5; /* card/icon soft surface — prototype --grey-light */ --pp-cream: #FCF9F4; /* legacy panel surface (kept) */ --pp-white: #FFFFFF; /* light surface — flips to a dark card in the For Him theme */ --pp-on-accent: #FFFFFF; /* text on accent buttons / dark sections — stays light in BOTH themes */ --pp-fh-hero-bg: #0A0F14; /* For Him hero background — exact, from the v2 prototype */ --pp-rose-deep: #AD606D; /* borders on rose surfaces */ /* Signature hero wash (prototype hero gradient) */ --pp-wash: linear-gradient(180deg, #FBE6EE 0%, #F3C6D5 55%, #D99AAC 100%); /* Dark section wash (newsletter) */ --pp-wash-dark: linear-gradient(160deg, #3A1530 0%, #5A1D47 50%, #8A3568 100%); /* Category card wash */ --pp-wash-card: linear-gradient(160deg, #FAF0F5 0%, #FFEDF6 100%); /* Soft pink CTA panel (blog cta-soft) */ --pp-wash-cta: linear-gradient(135deg, #FFE0EC 0%, #FFD0E0 100%); /* "Problem" story block (About page) — deliberately off-brand / toxic feel. Kept here because raw hex is only permitted in this file. */ --pp-wash-danger: linear-gradient(135deg, #1A0A0A 0%, #2A0F0F 50%, #1A0A0A 100%); --pp-danger-ink: #FF8A8A; /* headline on the dark problem block */ --pp-danger-body: #E39B9B; /* body copy on the dark problem block */ --pp-danger-soft: #D63031; /* negative pill text */ --pp-danger-surface: rgba(229, 72, 77, 0.08); --pp-danger-border: rgba(229, 72, 77, 0.16); /* Text + semantic */ --pp-text: #3A2833; /* body copy — prototype --text */ --pp-muted: #9A8592; /* muted/grey copy — prototype --grey */ --pp-success: #27AE60; --pp-error: #E5484D; --pp-star: #FFC107; /* review stars (real reviews only) */ /* Alpha channel bases (compose rgba without new hex) */ --pp-plum-rgb: 72, 25, 60; --pp-pink-rgb: 240, 64, 154; --pp-dark-rgb: 58, 21, 48; /* ---------------------------------------------------------------------- TYPOGRAPHY ---------------------------------------------------------------------- */ /* Families (self-hosted WOFF2 — never the Google CDN) */ --pp-display: "Playfair Display", "Bodoni Moda", Georgia, serif; --pp-sans: "DM Sans", "Helvetica Neue", system-ui, sans-serif; /* Weights */ --pp-w-light: 300; --pp-w-regular: 400; --pp-w-medium: 500; --pp-w-semibold: 600; --pp-w-bold: 700; --pp-w-heavy: 800; --pp-w-black: 900; /* Type scale — fluid, matching the prototype's clamp()s. */ --pp-fs-h1: clamp(3.2rem, 8vw, 6rem); /* hero H1 */ --pp-fs-h2: clamp(2rem, 4vw, 3rem); /* section headers */ --pp-fs-h3: 1.05rem; --pp-fs-deck: clamp(1.3rem, 2.6vw, 1.9rem); /* italic serif deck */ --pp-fs-body: 0.95rem; --pp-fs-sm: 0.85rem; --pp-fs-ui: 0.82rem; --pp-fs-eyebrow: 0.74rem; --pp-fs-price: 1.2rem; /* Line-heights */ --pp-lh-h1: 1.0; --pp-lh-tight: 1.1; --pp-lh-snug: 1.35; --pp-lh-body: 1.6; /* Letter-spacing */ --pp-ls-h1: -0.01em; --pp-ls-ui: 0.06em; --pp-ls-eyebrow: 0.28em; /* Body measure */ --pp-measure: 68ch; /* ---------------------------------------------------------------------- FORM (radius, shadow, glow) — prototype values ---------------------------------------------------------------------- */ --pp-radius-sm: 10px; --pp-radius: 16px; /* cards/panels — prototype --radius */ --pp-radius-lg: 28px; --pp-radius-pill: 50px; /* CTAs, badges, chips — prototype pills */ --pp-shadow-soft: 0 4px 24px rgba(var(--pp-dark-rgb), 0.06); --pp-shadow-lift: 0 16px 48px rgba(0, 0, 0, 0.10); --pp-shadow-pink: 0 20px 56px rgba(var(--pp-pink-rgb), 0.12); --pp-glow-pink: 0 0 0 1px var(--pp-pink), 0 0 28px rgba(var(--pp-pink-rgb), 0.35); /* ---------------------------------------------------------------------- SPACING & LAYOUT (4px base unit) ---------------------------------------------------------------------- */ --pp-space-1: 4px; --pp-space-2: 8px; --pp-space-3: 12px; --pp-space-4: 16px; --pp-space-5: 20px; --pp-space-6: 24px; --pp-space-8: 32px; --pp-space-10: 40px; --pp-space-12: 48px; --pp-space-16: 64px; --pp-section-y: 72px; /* section vertical rhythm — desktop */ --pp-container: 1200px; --pp-gutter: 40px; /* ---------------------------------------------------------------------- MOTION — prototype easing + durations ---------------------------------------------------------------------- */ --pp-ease: cubic-bezier(0.16, 1, 0.3, 1); --pp-ease-soft: cubic-bezier(0.22, 1, 0.36, 1); --pp-dur-fast: 250ms; --pp-dur-base: 350ms; --pp-dur-slow: 700ms; /* scroll reveal */ --pp-dur-cart: 320ms; --pp-stagger: 80ms; --pp-marquee: 30s; --pp-reveal-shift: 28px; } /* -------------------------------------------------------------------------- FOR HIM — the second storefront's palette (scoped, NOT a fork). One system, two palettes: applied via body.theme-him (server-side on /for-him/ pages). Every template that uses var(--pp-*) flips automatically; Playfair + DM Sans stay, only colour + corner radius change. Values from prototypes/purepleasure-for-him-v2-prototype.html (dark blue-steel). -------------------------------------------------------------------------- */ body.theme-him { /* Core — muted steel-blue accent (not neon), near-white headings */ --pp-plum: #F0F3F7; /* headings + primary text now near-white */ --pp-plum-deep: #08090C; /* deepest sections/footer */ --pp-pink: #5A95C4; /* primary accent, CTAs, active */ --pp-toggle-fill: #2E6C96; /* storefront-toggle active slider (For Him) — white AA */ --pp-cta: var(--pp-toggle-fill); /* MUST re-declare here. An indirect token (--pp-cta = var(--pp-toggle-fill)) collapses to a CONCRETE value in the scope it's declared — :root resolves it to #B01167 and that inherits into For Him unless re-resolved here. Without this line the For-Her pink leaks onto every For-Him CTA. Re-resolving in this scope gives #2E6C96 (5.6:1 on white). */ --pp-band-announce: linear-gradient(135deg, #06080F 0%, #123253 100%); /* distinct navy announcement band */ --pp-band-trust: #191E27; /* distinct charcoal trust band — reads separately from the navy announce + steel hero */ --pp-pink-light: #8BB5D6; --pp-pink-pale: #12171F; --pp-purple: #3A6D96; --pp-purple-light:#486F8F; --pp-teal: #7FB0CC; /* Surfaces — near-black body, lifted dark cards */ --pp-blush: #090A0E; /* page background */ --pp-blush-light: #0E1015; /* alternating section bg */ --pp-grey-light: #14171E; --pp-cream: #12151B; --pp-white: #12151B; /* dark card surface (on-accent text uses --pp-on-accent) */ --pp-rose-deep: #2A3340; /* borders on dark surfaces */ /* Text + muted */ --pp-text: #C4CCD6; --pp-muted: #7A838F; /* Alpha bases — shadows go black, accent glow goes steel-blue */ --pp-plum-rgb: 0, 0, 0; --pp-pink-rgb: 90, 149, 196; --pp-dark-rgb: 0, 0, 0; /* Sharper corners read as premium/masculine in the prototype */ --pp-radius-sm: 3px; --pp-radius: 4px; --pp-radius-lg: 8px; /* Washes remapped to dark steel */ --pp-wash: linear-gradient(180deg, #0E1015 0%, #12171F 55%, #1A2634 100%); --pp-wash-card: linear-gradient(160deg, #14171E 0%, #0E1015 100%); --pp-wash-cta: linear-gradient(135deg, #14202C 0%, #0E1620 100%); --pp-wash-dark: linear-gradient(160deg, #08090C 0%, #0E1015 50%, #14202C 100%); /* Smooth the palette swap when navigating between storefronts */ --pp-transition-theme: background 0.5s ease, color 0.5s ease, border-color 0.5s ease; } /* -------------------------------------------------------------------------- MOBILE overrides -------------------------------------------------------------------------- */ @media (max-width: 900px) { :root { --pp-gutter: 20px; --pp-section-y: 52px; } }