/* ============================================================ SABLE — tokens.css Design system CSS variables — single source of truth Version 1.1 | Brand: Sable | myjoyroom.com (interim) IMPORT THIS FILE FIRST on every page: ============================================================ */ :root { /* ---------------------------------------------------------- COLOUR — Backgrounds ---------------------------------------------------------- */ --color-black: #0a0906; /* True background — page bg */ --color-black-soft: #0d0c09; /* Card / section backgrounds */ --color-black-warm: #111009; /* Hover states, elevated surfaces */ --color-black-border: #1c1b17; /* Visible borders on black */ /* ---------------------------------------------------------- COLOUR — Text CONTRAST RULES (WCAG AA): - Body text ≤18px → must be ≥ 4.5:1 → use ivory or ivory-muted ONLY - Large text >18px → must be ≥ 3:1 → ivory, ivory-muted, or ivory-faint - NEVER use raw rgba() for text - NEVER set text opacity below 0.7 ---------------------------------------------------------- */ --color-ivory: #e8e0d4; /* Primary text — use for almost everything on dark bg. Contrast 12.4:1 ✓ */ --color-ivory-muted: #c8c0b4; /* Secondary text — supporting copy. Contrast 8.2:1 ✓ */ --color-ivory-faint: #a8a09a; /* Tertiary — metadata, large labels only. NEVER for small text. Contrast 5.8:1 ✓ */ --color-ivory-ghost: rgba(232,224,212,0.08); /* Subtle backgrounds ONLY — never for text */ /* ---------------------------------------------------------- COLOUR — Gold accent ---------------------------------------------------------- */ --color-gold: #c9a97a; /* Primary accent — CTAs, highlights, prices */ --color-gold-light: #d9b98a; /* Gold hover state */ --color-gold-dark: #a8885a; /* Gold pressed / active */ --color-gold-faint: rgba(201,169,122,0.15); /* Gold tint backgrounds */ --color-gold-border: rgba(201,169,122,0.35); /* Gold borders */ /* ---------------------------------------------------------- COLOUR — Semantic ---------------------------------------------------------- */ --color-success: #4a9a6a; /* Order confirmed, in stock */ --color-error: #c25a4a; /* Form errors, out of stock */ --color-warning: #b8883a; /* Low stock, attention needed */ /* ---------------------------------------------------------- DARK BACKGROUND TEXT — minimum readable values On any dark background (#0a0906 to #1c1b17): - Readable minimum solid colour: #7a726c (--color-ivory-faint) - Never go below this for any visible text - Never use opacity below 0.65 on text — use a solid colour instead - #8a8070 = safe muted/secondary text on dark bg (contrast 5.1:1) - rgba() is permitted for decorative elements only, never text ---------------------------------------------------------- */ --color-dark-bg-text-min: #a8a09a; /* Absolute minimum — large labels only */ --color-dark-bg-text-mid: #c8c0b4; /* Secondary text on dark backgrounds */ --border-hair: 0.5px solid rgba(232,224,212,0.08); /* Hairline dividers */ --border-subtle: 0.5px solid rgba(232,224,212,0.12); /* Card borders */ --border-visible: 0.5px solid rgba(232,224,212,0.25); /* Visible borders */ --border-gold: 0.5px solid rgba(201,169,122,0.35); /* Accent borders */ --border-focus: 1.5px solid rgba(201,169,122,0.8); /* Focus rings — accessibility */ /* ---------------------------------------------------------- TYPOGRAPHY — Families ---------------------------------------------------------- */ --font-display: 'Cormorant Garamond', Georgia, serif; /* All headings & display */ --font-body: 'Jost', system-ui, sans-serif; /* All body, UI, labels */ /* ---------------------------------------------------------- TYPOGRAPHY — Scale ---------------------------------------------------------- */ --text-hero: clamp(3rem, 6vw, 5.5rem); /* Hero headlines */ --text-h1: clamp(2.2rem, 4vw, 3.5rem); /* Page titles */ --text-h2: clamp(1.6rem, 3vw, 2.4rem); /* Section titles */ --text-h3: clamp(1.2rem, 2vw, 1.6rem); /* Sub-section titles */ --text-h4: 1.1rem; /* Card titles, product names */ --text-body: 1rem; /* Body copy — 16px (up from 14px) */ --text-small: 0.875rem; /* Captions, labels — 14px (up from 12px) */ --text-micro: 0.75rem; /* Tags, badges, eyebrows — 12px (up from 10px) */ /* ---------------------------------------------------------- TYPOGRAPHY — Weights ---------------------------------------------------------- */ --weight-thin: 200; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; /* ---------------------------------------------------------- TYPOGRAPHY — Letter spacing ---------------------------------------------------------- */ --tracking-tight: -0.01em; /* Hero headlines */ --tracking-normal: 0; --tracking-wide: 0.08em; /* Prices */ --tracking-wider: 0.15em; /* Buttons, nav links */ --tracking-widest: 0.25em; /* Labels, eyebrows */ --tracking-ultra: 0.35em; /* Logo wordmark only */ /* ---------------------------------------------------------- TYPOGRAPHY — Line heights ---------------------------------------------------------- */ --leading-tight: 1.05; /* Hero headlines */ --leading-snug: 1.2; /* Section headings */ --leading-normal: 1.6; /* UI text */ --leading-loose: 1.9; /* Body copy */ --leading-ultra: 2.2; /* Spacious body sections */ /* ---------------------------------------------------------- SPACING — 8px base grid Rule: when in doubt, add more space. Generosity is a luxury signal. ---------------------------------------------------------- */ --space-1: 4px; /* Micro — icon padding, tight gaps */ --space-2: 8px; /* Tight — inline element gaps */ --space-3: 12px; /* Small — close element gaps */ --space-4: 16px; /* Base — component padding */ --space-5: 24px; /* Medium — card padding */ --space-6: 32px; /* Large — section internal gaps */ --space-7: 48px; /* XL — gaps between groups */ --space-8: 64px; /* Section padding mobile */ --space-9: 96px; /* Section padding desktop */ --space-10: 128px; /* Hero padding */ --space-11: 192px; /* Maximum vertical space */ /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --max-width: 1440px; /* Maximum content width */ --max-width-text: 680px; /* Maximum text column */ --max-width-narrow: 480px; /* Forms, centred content */ --gutter: clamp(1.5rem, 4vw, 3rem); /* Page side padding — fluid */ --section-padding: clamp(4rem, 8vw, 8rem); /* Vertical section spacing — fluid */ --grid-gap: 1.5px; /* Product grid gap — hairline */ /* ---------------------------------------------------------- BORDERS & RADIUS ---------------------------------------------------------- */ --radius-none: 0; --radius-sm: 2px; /* Buttons, badges */ --radius-md: 4px; /* Cards, inputs */ --radius-lg: 8px; /* Large cards */ --radius-pill: 999px; /* Pills, tags */ /* ---------------------------------------------------------- MOTION Rule: moderate throughout. Confident, unhurried. Never bounce or elastic. Always wrap non-essential animation in prefers-reduced-motion. ---------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Entries — fast start, slow settle */ --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* State changes */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Subtle reveals only */ --duration-instant: 80ms; /* Immediate feedback */ --duration-fast: 150ms; /* Hover states */ --duration-normal: 300ms; /* Nav, colour transitions */ --duration-slow: 500ms; /* Modals, overlays */ --duration-slower: 800ms; /* Image reveals, page elements */ --duration-page: 1200ms; /* Full page entry sequence */ /* ---------------------------------------------------------- Z-INDEX STACK ---------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 10; /* Raised cards, sticky elements */ --z-overlay: 20; /* Dropdowns, tooltips */ --z-modal: 30; /* Cart drawer, quick view */ --z-toast: 40; /* Notifications */ --z-nav: 50; /* Navigation */ --z-age-gate: 100; /* Age gate — always on top, no exceptions */ }