/* * Plaisirs du Palais โ€” Marketing Design Tokens * Source of truth: Plaisirs du Palais ยท Design System Reference Book V 1.0 (April 2026) * * Scoped under [data-marketing] so ERP styles are completely isolated. Every * marketing component renders inside this scope (set by MarketingShell on the * element when on the marketing host, or on a wrapper in dev). */ :root[data-marketing], [data-marketing] { /* ---- Primary browns (design system p.09) ---- */ --color-espresso: #2e1e11; --color-cocoa: #633715; --color-caramel: #965f26; --color-latte: #cb9760; --color-cream: #ffe1b7; /* ---- Amber accents (p.10, single-use) ---- */ --color-honey: #fcb216; --color-saffron: #ffd54e; /* ---- Neutrals (p.11) ---- */ --color-paper: #fbf7f1; --color-parchment: #f5eee2; --color-sand: #e9dfc9; --color-stone: #bdae93; --color-clay: #7a6751; --color-bark: #4a3824; --color-ink: #2e1e11; --color-black: #14100b; /* ---- Semantic aliases (p.12 pairings) ---- */ --bg: var(--color-paper); --bg-panel: var(--color-parchment); --bg-divider: var(--color-sand); --bg-espresso: var(--color-espresso); --bg-cocoa: var(--color-cocoa); --fg-1: var(--color-ink); --fg-2: var(--color-bark); --fg-3: var(--color-clay); --fg-muted: var(--color-stone); --fg-on-dark: var(--color-paper); --fg-on-cream: var(--color-espresso); --accent-honey: var(--color-honey); --accent-honey-saffron: var(--color-saffron); /* ---- Spacing scale (p.20) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ---- Radii (p.21) ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 24px; --radius-pill: 999px; --radius-circle: 50%; /* ---- Shadows / elevation (p.22) ---- * Calibrated warm โ€” espresso-tinted, not generic black โ€” * to sit naturally on cream paper without metallic glare. */ --shadow-xs: 0 1px 2px rgba(46, 30, 17, 0.06); /* hover lift */ --shadow-sm: 0 2px 6px rgba(46, 30, 17, 0.08); /* resting */ --shadow-md: 0 8px 24px rgba(46, 30, 17, 0.1); /* feature */ --shadow-lg: 0 16px 48px rgba(46, 30, 17, 0.14); /* modal */ --shadow-xl: 0 32px 80px rgba(46, 30, 17, 0.2); /* overlay */ /* ---- Typography families ---- */ --font-serif: "Cormorant Garamond", "Cormorant", "Georgia", serif; --font-sans: "Inter", -apple-system, "Segoe UI", "Helvetica Neue", system-ui, sans-serif; /* ---- Display / heading scale (p.14) ---- */ --type-h1-size: 64px; --type-h1-line: 67px; --type-h2-size: 48px; --type-h2-line: 58px; --type-h3-size: 36px; --type-h3-line: 43px; --type-h4-size: 28px; --type-h4-line: 34px; /* ---- Body scale (p.15) ---- */ --type-lead-size: 18px; --type-lead-line: 26px; --type-body-size: 16px; --type-body-line: 23px; --type-small-size: 14px; --type-small-line: 20px; --type-meta-size: 12px; --type-meta-line: 16px; /* ---- Labels / capitals (p.16) ---- */ --type-eyebrow-size: 11px; --type-eyebrow-track: 0.14em; --type-promise-track: 0.22em; /* ---- Pull quote (p.18) ---- */ --type-quote-size: 26px; --type-quote-line: 35px; } /* ---- Fluid clamps so headings scale gracefully on mobile. * Mobile: ~36/30/26/22; Desktop: full design-system size. */ @media (max-width: 768px) { :root[data-marketing], [data-marketing] { --type-h1-size: clamp(36px, 8vw, 64px); --type-h1-line: 1.1; --type-h2-size: clamp(30px, 6vw, 48px); --type-h2-line: 1.18; --type-h3-size: clamp(26px, 5vw, 36px); --type-h3-line: 1.2; --type-h4-size: clamp(22px, 4vw, 28px); --type-h4-line: 1.25; } }