/* ============================================================ TOKENS — Karina Zakharash Design System ------------------------------------------------------------ Single source of truth for color, type, spacing, motion. Mobile-first. Scoped to :root so it overlays style.css safely. All values are CSS custom properties (no !important anywhere). Reference benchmarks: Jose Villa, Erich McVey, KT Merry. ============================================================ */ :root { /* ---------------------------------------------------------- PALETTE — Champagne Gold + Muted Rose + Warm Neutrals One accent (champagne gold). Rose is for accents in romantic editorial spreads only — never for primary CTAs. All foreground/background pairings are AA-checked. ---------------------------------------------------------- */ /* Champagne Gold (primary accent) — single brand voice */ --ds-gold-50: #faf5eb; /* faintest wash, hover backgrounds */ --ds-gold-100: #f3e9d2; /* dividers on cream */ --ds-gold-200: #e7d3a8; /* subtle borders */ --ds-gold-300: #d9bb84; /* hover states */ --ds-gold-400: #c8a882; /* matches legacy --accent for harmony */ --ds-gold-500: #b89968; /* PRIMARY — AA on cream (4.6:1) */ --ds-gold-600: #9b7f53; /* hover on primary, AA on white (4.8:1) */ --ds-gold-700: #7d6541; /* AA on cream (7.0:1) — captions */ --ds-gold-800: #5a4a30; /* dark gold, body emphasis */ --ds-gold-900: #3a2f1f; /* deepest gold-brown */ /* Muted Rose (secondary accent — editorial only) */ --ds-rose-50: #fbf3f0; --ds-rose-100: #f3e1da; --ds-rose-200: #e6c2b4; --ds-rose-300: #d4a08a; /* photo-caption rose */ --ds-rose-500: #b07a64; /* AA on cream (4.7:1) */ --ds-rose-700: #7d4f3d; /* Warm Neutrals — 9-step gray scale on warm undertone */ --ds-neutral-0: #ffffff; --ds-neutral-50: #faf6f1; /* card surface */ --ds-neutral-100: #f7f3ee; /* canvas (matches existing --bg) */ --ds-neutral-200: #efe8df; /* alt surface */ --ds-neutral-300: #e5ddd3; /* borders */ --ds-neutral-400: #c9bfb2; /* disabled / dividers */ --ds-neutral-500: #a89b8c; /* tertiary text — AA on cream (4.5:1) */ --ds-neutral-600: #7a6e62; /* secondary text — AA on cream (7.1:1) */ --ds-neutral-700: #564c42; /* body emphasis */ --ds-neutral-800: #3a3028; /* primary text — AAA on cream (12.6:1) */ --ds-neutral-900: #2c241c; /* darkest — headings */ /* Semantic */ --ds-success: #4a8a5c; /* AA on cream (4.6:1) */ --ds-warning: #b07a1a; /* AA on cream (4.5:1) */ --ds-error: #b13838; /* AA on cream (5.6:1) */ --ds-info: #5a7d9b; /* Tokenized roles (use these, not raw scale, in components) */ /* ---------------------------------------------------------- EDITORIAL PALETTE OVERRIDE (2026-04-30 pivot) Bone gallery + Ink + Oxblood — fashion editorial vibe to match Karina's actual portfolio (B&W tailoring, red-accent fashion, museum locations). ---------------------------------------------------------- */ --ds-bone: #f4f0e8; --ds-bone-warm: #fafaf6; --ds-ink: #1a1614; --ds-ink-soft: #2c2620; --ds-ink-muted: #4a4641; --ds-oxblood: #8d2f2a; --ds-oxblood-deep:#6e2320; --ds-champagne: #b89968; --ds-bg: var(--ds-bone); --ds-bg-elevated: var(--ds-bone-warm); --ds-bg-card: #ffffff; --ds-bg-inverse: var(--ds-ink); --ds-text: var(--ds-ink); --ds-text-muted: var(--ds-ink-muted); --ds-text-subtle: #6a665f; --ds-text-inverse: var(--ds-bone); --ds-accent: var(--ds-oxblood); --ds-accent-hover: var(--ds-oxblood-deep); --ds-accent-soft: rgba(141, 47, 42, 0.08); --ds-accent-on-dark: #d4a09d; --ds-border: var(--ds-neutral-300); --ds-border-soft: rgba(58, 48, 40, 0.08); --ds-border-strong: rgba(58, 48, 40, 0.18); --ds-border-gold: rgba(184, 153, 104, 0.35); /* Glass surfaces (for pricing/testimonial cards) */ --ds-glass-bg: rgba(255, 255, 255, 0.72); --ds-glass-bg-soft: rgba(255, 255, 255, 0.55); --ds-glass-border: rgba(184, 153, 104, 0.22); --ds-glass-blur: 20px; --ds-glass-blur-mobile: 12px; /* Overlays for image hover */ --ds-overlay-light: rgba(247, 243, 238, 0.45); --ds-overlay-medium: rgba(44, 36, 28, 0.35); --ds-overlay-heavy: rgba(44, 36, 28, 0.72); --ds-overlay-gold: rgba(184, 153, 104, 0.18); /* ---------------------------------------------------------- TYPE SCALE — Major Third (1.250), 8 levels Fluid via clamp(). Mobile-first base 16px. ---------------------------------------------------------- */ --ds-font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --ds-font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --ds-font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace; --ds-font-display: var(--ds-font-serif); --ds-font-body: var(--ds-font-sans); /* Major Third 1.250 — refined for editorial pacing */ --ds-text-micro: clamp(0.6875rem, 0.66rem + 0.15vw, 0.75rem); /* 11-12px */ --ds-text-caption: clamp(0.75rem, 0.72rem + 0.18vw, 0.8125rem); /* 12-13px */ --ds-text-small: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem); /* 14-15px */ --ds-text-body: clamp(1rem, 0.96rem + 0.25vw, 1.125rem); /* 16-18px */ --ds-text-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); /* 18-22px */ --ds-text-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); /* 24-32px */ --ds-text-h2: clamp(2rem, 1.6rem + 1.8vw, 3rem); /* 32-48px */ --ds-text-h1: clamp(2.75rem, 2rem + 3.5vw, 4.5rem); /* 44-72px */ --ds-text-display: clamp(3.4rem, 2.2rem + 5.8vw, 7.8rem); /* 54-125px — hero title, verified 375/768/1440 */ /* Weights — restrained: light + regular + medium only for serif */ --ds-fw-light: 300; --ds-fw-regular: 400; --ds-fw-medium: 500; --ds-fw-semibold: 600; /* Line heights — tight for display, generous for body */ --ds-lh-tight: 1.1; --ds-lh-display: 1.05; --ds-lh-heading: 1.2; --ds-lh-snug: 1.4; --ds-lh-body: 1.7; --ds-lh-relaxed: 1.85; /* Letter spacing — luxury whisper */ --ds-tracking-tight: -0.02em; --ds-tracking-normal: 0; --ds-tracking-wide: 0.04em; --ds-tracking-wider: 0.12em; --ds-tracking-widest: 0.24em; --ds-tracking-eyebrow: 0.32em; /* ---------------------------------------------------------- SPACING — 4px base, geometric progression ---------------------------------------------------------- */ --ds-space-0: 0; --ds-space-1: 0.25rem; /* 4px */ --ds-space-2: 0.5rem; /* 8px */ --ds-space-3: 0.75rem; /* 12px */ --ds-space-4: 1rem; /* 16px */ --ds-space-5: 1.5rem; /* 24px */ --ds-space-6: 2rem; /* 32px */ --ds-space-7: 2.5rem; /* 40px */ --ds-space-8: 3rem; /* 48px */ --ds-space-9: 4rem; /* 64px */ --ds-space-10: 5rem; /* 80px */ --ds-space-11: 6rem; /* 96px */ --ds-space-12: 8rem; /* 128px */ --ds-space-13: 10rem; /* 160px */ --ds-space-14: 12rem; /* 192px */ /* Semantic spacing */ --ds-section-y: clamp(4rem, 5vw + 2rem, 8rem); --ds-section-y-large: clamp(6rem, 8vw + 2rem, 12rem); --ds-container-x: clamp(1.5rem, 4vw, 5rem); --ds-container-max: 1320px; --ds-container-narrow: 880px; --ds-container-prose: 680px; /* ---------------------------------------------------------- SHADOWS — restrained, warm-tinted ---------------------------------------------------------- */ /* Classical depth */ --ds-shadow-1: 0 1px 2px rgba(58, 48, 40, 0.06), 0 1px 3px rgba(58, 48, 40, 0.04); --ds-shadow-2: 0 4px 12px rgba(58, 48, 40, 0.08), 0 2px 4px rgba(58, 48, 40, 0.04); --ds-shadow-3: 0 16px 40px rgba(58, 48, 40, 0.12), 0 4px 12px rgba(58, 48, 40, 0.06); /* Glass-specific (softer, warmer) */ --ds-shadow-glass-1: 0 2px 12px rgba(184, 153, 104, 0.10), 0 1px 3px rgba(58, 48, 40, 0.04); --ds-shadow-glass-2: 0 8px 28px rgba(184, 153, 104, 0.14), 0 2px 8px rgba(58, 48, 40, 0.06); --ds-shadow-glass-3: 0 24px 60px rgba(184, 153, 104, 0.20), 0 8px 20px rgba(58, 48, 40, 0.08); /* Gold halo — for hero CTAs */ --ds-shadow-gold-glow: 0 0 0 1px rgba(184, 153, 104, 0.18), 0 12px 32px rgba(184, 153, 104, 0.22); /* Inset for inputs */ --ds-shadow-inset: inset 0 1px 2px rgba(58, 48, 40, 0.06); /* ---------------------------------------------------------- RADIUS ---------------------------------------------------------- */ --ds-radius-none: 0; --ds-radius-xs: 2px; --ds-radius-sm: 4px; --ds-radius-md: 8px; --ds-radius-lg: 16px; --ds-radius-xl: 24px; --ds-radius-2xl: 32px; --ds-radius-full: 9999px; /* ---------------------------------------------------------- EASING — quiet motion, no bouncy springs ---------------------------------------------------------- */ --ds-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ds-ease-decelerate: cubic-bezier(0, 0, 0.2, 1); /* enter */ --ds-ease-accelerate: cubic-bezier(0.4, 0, 1, 1); /* exit */ --ds-ease-bounce-soft: cubic-bezier(0.34, 1.2, 0.64, 1); /* gentle accent only */ --ds-ease-luxury: cubic-bezier(0.25, 0.1, 0.25, 1); /* signature curve */ /* ---------------------------------------------------------- DURATION ---------------------------------------------------------- */ --ds-dur-instant: 80ms; --ds-dur-fast: 180ms; --ds-dur-normal: 320ms; --ds-dur-slow: 600ms; --ds-dur-slower: 900ms; --ds-dur-cinema: 1400ms; /* image reveals */ /* Composite transitions — drop-in for `transition:` */ --ds-transition-fast: all var(--ds-dur-fast) var(--ds-ease-standard); --ds-transition-normal: all var(--ds-dur-normal) var(--ds-ease-standard); --ds-transition-luxury: all var(--ds-dur-slow) var(--ds-ease-luxury); /* ---------------------------------------------------------- Z-INDEX — named layers (no magic numbers in components) ---------------------------------------------------------- */ --ds-z-below: -1; --ds-z-base: 0; --ds-z-raised: 1; --ds-z-dropdown: 100; --ds-z-sticky: 200; --ds-z-header: 300; --ds-z-overlay: 400; --ds-z-modal: 500; --ds-z-popover: 600; --ds-z-toast: 700; --ds-z-tooltip: 800; --ds-z-cursor: 900; --ds-z-preloader: 1000; /* ---------------------------------------------------------- BREAKPOINTS — exposed as variables for JS readback Use in CSS via @media (min-width: 768px) { ... } ---------------------------------------------------------- */ --ds-bp-xs: 480px; --ds-bp-sm: 640px; --ds-bp-md: 768px; --ds-bp-lg: 1024px; --ds-bp-xl: 1280px; --ds-bp-2xl: 1536px; /* Header / layout chrome */ --ds-header-h: 72px; --ds-header-h-scrolled: 60px; } /* Tablet — looser typography, tighter section padding */ @media (min-width: 768px) { :root { --ds-header-h: 84px; } } /* Desktop — full luxury spacing */ @media (min-width: 1024px) { :root { --ds-header-h: 96px; --ds-header-h-scrolled: 72px; } } /* Honor user preference: reduced contrast not standard yet, but lock motion-sensitive values to instant. */ @media (prefers-reduced-motion: reduce) { :root { --ds-dur-instant: 0ms; --ds-dur-fast: 0ms; --ds-dur-normal: 0ms; --ds-dur-slow: 0ms; --ds-dur-slower: 0ms; --ds-dur-cinema: 0ms; } }