/* ============================================================ SABLE — tokens.css Design system CSS variables — single source of truth Version 2.0 | Brand: Sable | sabledg.com COLOUR DIRECTION: C — Pale slate Inspired by: Maude, The Row, Aesop Background: warm off-white / pale linen Text: near-black warm, slate secondary Accent: warm bronze (replaces gold) IMPORT THIS FILE FIRST on every page: ============================================================ */ :root { /* ---------------------------------------------------------- COLOUR — Backgrounds Light palette — warm off-white family ---------------------------------------------------------- */ --color-bg: #f0ede8; /* Page background — white smoke */ --color-bg-soft: #e8e4dc; /* Card / section backgrounds — pale linen */ --color-bg-warm: #e0dbd2; /* Hover states, elevated surfaces */ --color-bg-border: #ccc8c0; /* Visible borders on light bg */ /* Legacy aliases — keep for backward compatibility during transition */ --color-black: #f0ede8; --color-black-soft: #e8e4dc; --color-black-warm: #e0dbd2; --color-black-border: #ccc8c0; /* ---------------------------------------------------------- COLOUR — Text CONTRAST RULES (WCAG AA): - Body text ≤18px → must be ≥ 4.5:1 → use --color-text or --color-text-secondary - Large text >18px → must be ≥ 3:1 → all text variables qualify - NEVER use raw rgba() for text - NEVER set text opacity below 0.7 ---------------------------------------------------------- */ --color-text: #1c1c1a; /* Primary text — near black, warm. Contrast 16.1:1 ✓ */ --color-text-secondary: #4a4540; /* Secondary text — darker slate. Contrast 7.8:1 ✓ */ --color-text-tertiary: #7a7570; /* Tertiary — large labels only. Contrast 4.6:1 ✓ */ --color-text-ghost: rgba(28,28,26,0.08); /* Subtle backgrounds ONLY — never for text */ /* Legacy aliases */ --color-ivory: #1c1c1a; --color-ivory-muted: #4a4540; --color-ivory-faint: #7a7570; --color-ivory-ghost: rgba(28,28,26,0.08); /* ---------------------------------------------------------- COLOUR — Bronze accent Replaces gold — warm, muted, not flashy ---------------------------------------------------------- */ --color-accent: #9a8060; /* Primary accent — CTAs, highlights, prices */ --color-accent-light: #aa9070; /* Accent hover state */ --color-accent-dark: #7a6248; /* Accent pressed / active */ --color-accent-faint: rgba(154,128,96,0.12); /* Accent tint backgrounds */ --color-accent-border: rgba(154,128,96,0.3); /* Accent borders */ /* Legacy gold aliases — maps to bronze */ --color-gold: #9a8060; --color-gold-light: #aa9070; --color-gold-dark: #7a6248; --color-gold-faint: rgba(154,128,96,0.12); --color-gold-border: rgba(154,128,96,0.3); /* ---------------------------------------------------------- COLOUR — Semantic ---------------------------------------------------------- */ --color-success: #3a7a52; /* Order confirmed, in stock */ --color-error: #a84438; /* Form errors, out of stock */ --color-warning: #9a6e2a; /* Low stock, attention needed */ /* ---------------------------------------------------------- BORDERS ---------------------------------------------------------- */ --border-hair: 0.5px solid rgba(28,28,26,0.08); /* Hairline dividers */ --border-subtle: 0.5px solid rgba(28,28,26,0.14); /* Card borders */ --border-visible: 0.5px solid rgba(28,28,26,0.28); /* Visible borders */ --border-gold: 0.5px solid rgba(154,128,96,0.35); /* Accent borders */ --border-focus: 1.5px solid rgba(154,128,96,0.7); /* 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 */ --text-small: 0.875rem; /* Captions, labels — 14px */ --text-micro: 0.75rem; /* Tags, badges, eyebrows — 12px */ /* ---------------------------------------------------------- TYPOGRAPHY — Weights ---------------------------------------------------------- */ --weight-thin: 200; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; /* ---------------------------------------------------------- TYPOGRAPHY — Letter spacing ---------------------------------------------------------- */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-wider: 0.15em; --tracking-widest: 0.25em; --tracking-ultra: 0.35em; /* ---------------------------------------------------------- TYPOGRAPHY — Line heights ---------------------------------------------------------- */ --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.6; --leading-loose: 1.9; --leading-ultra: 2.2; /* ---------------------------------------------------------- SPACING — 8px base grid ---------------------------------------------------------- */ --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; --space-10: 128px; --space-11: 192px; /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --max-width: 1440px; --max-width-text: 680px; --max-width-narrow: 480px; --gutter: clamp(1.5rem, 4vw, 3rem); --section-padding: clamp(4rem, 8vw, 8rem); --grid-gap: 1.5px; /* ---------------------------------------------------------- BORDERS & RADIUS ---------------------------------------------------------- */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; /* ---------------------------------------------------------- MOTION ---------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-instant: 80ms; --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; --duration-slower: 800ms; --duration-page: 1200ms; /* ---------------------------------------------------------- Z-INDEX STACK ---------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-overlay: 20; --z-modal: 30; --z-toast: 40; --z-nav: 50; --z-age-gate: 100; }