/* ============================================================================ TOKENS — design variables for the whole storefront. ---------------------------------------------------------------------------- :root holds skin-agnostic scale (space, type, radius, motion). [data-skin="…"] blocks hold the brand-specific palette + fonts. They mirror the palette/fonts declared in brand.config.js — keep the two in sync. The active skin is set by skin.js as data-skin on . ========================================================================== */ :root { /* ---- Spacing scale (8px base) ---- */ --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: 4rem; --space-9: 6rem; --space-10: 8rem; --space-11: 11rem; /* ---- Type scale (fluid) ---- */ --fs-eyebrow: 0.72rem; --fs-small: 0.82rem; --fs-body: clamp(0.98rem, 0.92rem + 0.3vw, 1.08rem); --fs-lead: clamp(1.12rem, 1rem + 0.6vw, 1.3rem); --fs-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem); --fs-h2: clamp(1.8rem, 1.4rem + 1.8vw, 2.85rem); --fs-h1: clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem); --fs-display: clamp(3.2rem, 2rem + 5vw, 6rem); /* ---- Layout ---- */ --container: 1240px; --container-narrow: 880px; --gutter: clamp(1.25rem, 5vw, 4rem); /* ---- Radius ---- */ --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-pill: 999px; /* ---- Motion ---- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 0.45s; /* ---- Z ---- */ --z-nav: 100; --z-modal: 1000; --z-switcher: 1100; } /* ------------------------------------------------------------------------- */ /* SKIN · OBSIDIAN HALL — cool near-black, warm gold accent */ /* ------------------------------------------------------------------------- */ [data-skin="obsidian"] { --font-display: "Cormorant Garamond", Georgia, serif; --font-sans: "Hanken Grotesk", system-ui, sans-serif; --display-weight: 600; --display-italic: 0; --bg: #0c0b0a; /* page */ --bg-2: #131211; /* raised section */ --surface: #16140f; /* cards / mats */ --surface-2: #1c1a15; /* hover / inner */ --frame: #050505; /* picture frame */ --ink: #f2ede1; /* high-emphasis text */ --ink-soft: #cfc7b8; /* body */ --ink-mute: #8f887a; /* captions */ --ink-faint: #5d564b; /* slot watermark */ --line: rgba(242, 237, 225, 0.10); --line-strong: rgba(242, 237, 225, 0.18); --accent: #c9a45c; /* metallic gold */ --accent-bright: #ddbd7c; --accent-deep: #9c7d3f; --on-accent: #1a1408; /* text on solid accent */ --accent-glow: rgba(201, 164, 92, 0.22); } /* ------------------------------------------------------------------------- */ /* SKIN · NOBLE & HOUND — warm brown-black, antique gold accent */ /* ------------------------------------------------------------------------- */ [data-skin="noblehound"] { --font-display: "Marcellus", Georgia, serif; --font-sans: "Hanken Grotesk", system-ui, sans-serif; --display-weight: 400; --display-italic: 0; --bg: #14110e; --bg-2: #1a1611; --surface: #1f1a14; --surface-2: #261f17; --frame: #0a0805; --ink: #f4ece0; --ink-soft: #d6cb b9; --ink-soft: #d6cbb9; --ink-mute: #a4977f; --ink-faint: #6b5f4c; --line: rgba(244, 236, 224, 0.10); --line-strong: rgba(244, 236, 224, 0.18); --accent: #c8a86a; --accent-bright: #ddc189; --accent-deep: #9b7f49; --on-accent: #1a1207; --accent-glow: rgba(200, 168, 106, 0.22); }