/* ============================================================= TIFFANY RUSSELL STUDIO — DESIGN TOKENS v1.0 · Generated 2026-05-03 Drop these CSS custom properties into any project. ============================================================= */ :root { /* ---------------------------------------------------------- BRAND COLORS The three sacred colors — exact values from the primary logo. ---------------------------------------------------------- */ --color-ink: #102C4B; /* Navy. Workhorse for type, UI chrome */ --color-coral: #F68B6A; /* Warm gradient start */ --color-rose: #A92654; /* Deep gradient end */ /* Brand gradient — use as accent across hero moments */ --gradient-brand: linear-gradient(180deg, #F68B6A 0%, #A92654 100%); --gradient-brand-h: linear-gradient(90deg, #F68B6A 0%, #A92654 100%); --gradient-brand-diagonal: linear-gradient(135deg, #F68B6A 0%, #A92654 100%); /* ---------------------------------------------------------- NEUTRAL SCALE Warm-tinted neutrals so backgrounds harmonize with the coral/rose gradient. Avoid pure black/white where possible. ---------------------------------------------------------- */ --color-paper: #FAF6F0; /* Warm cream — primary surface */ --color-paper-dim: #F5EFE6; /* Slightly recessed surface */ --color-white: #FFFFFF; /* True white — use sparingly */ --color-cloud: #F1F2F5; /* Cool neutral 50 */ --color-fog: #E2E4E9; /* Cool neutral 200 */ --color-mist: #C9CCD3; /* Cool neutral 300 */ --color-stone: #8B8F9A; /* Cool neutral 500 — muted text */ --color-slate: #4F5663; /* Cool neutral 700 — secondary text */ --color-graphite: #2A3447; /* Cool neutral 800 — strong text */ --color-onyx: #0B1A2E; /* Near-black — only for max emphasis */ /* ---------------------------------------------------------- SEMANTIC COLORS For UI states. Tuned to harmonize with the brand palette. ---------------------------------------------------------- */ --color-success: #2D8F5F; --color-success-bg: #E5F2EB; --color-warning: #D9A02E; --color-warning-bg: #FBF3DC; --color-error: #B83A3F; /* Slightly warmer than brand rose */ --color-error-bg: #F8E4E5; --color-info: #2F6FB7; --color-info-bg: #E1ECF7; /* ---------------------------------------------------------- SURFACE TOKENS — semantic aliases for layout Use these in components instead of raw color tokens. ---------------------------------------------------------- */ --surface-base: var(--color-paper); --surface-raised: var(--color-white); --surface-recessed: var(--color-paper-dim); --surface-inverted: var(--color-ink); --text-primary: var(--color-ink); --text-secondary: var(--color-slate); --text-muted: var(--color-stone); --text-disabled: var(--color-mist); --text-inverted: var(--color-paper); --text-accent: var(--color-rose); --border-subtle: var(--color-fog); --border-default: var(--color-mist); --border-strong: var(--color-stone); --border-focus: var(--color-coral); /* ---------------------------------------------------------- TYPOGRAPHY Brand fonts (licensed): · Brittany Signature — for "Tiffany" script moments · Champagne & Limousines — for "RUSSELL" / "STUDIO" / display Self-host in /fonts/ — see @font-face block below. Web fallbacks (Qwitcher Grypen / Anton / DM Sans) cascade if the licensed files aren't loaded. Brittany Signature is intentionally OMITTED from the script cascade — license is desktop-only. See --font-display-script note below. ---------------------------------------------------------- */ /* Web cascade — Brittany Signature intentionally OMITTED. Set Sail Studios license is desktop-only; serving Brittany on the public web would violate it AND your local install would mask the real visitor experience during dev. Qwitcher Grypen is the active script. To re-enable Brittany after a webfont license upgrade, prepend it to this cascade. */ --font-display-script: 'Qwitcher Grypen', 'Allura', 'Brush Script MT', cursive; --font-display-heavy: 'Champagne & Limousines', 'Anton', 'Bebas Neue', 'Impact', sans-serif; --font-sans: 'Champagne & Limousines', 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif; --font-body: 'DM Sans', 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --font-mono: 'DM Mono', 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* Type scale — major-third (1.25) progression */ --text-2xs: 0.6875rem; /* 11px — fine print, captions */ --text-xs: 0.75rem; /* 12px — labels, metadata */ --text-sm: 0.875rem; /* 14px — secondary body */ --text-base: 1rem; /* 16px — body */ --text-lg: 1.125rem; /* 18px — emphasized body */ --text-xl: 1.25rem; /* 20px — small headings */ --text-2xl: 1.5rem; /* 24px — h4 */ --text-3xl: 1.875rem; /* 30px — h3 */ --text-4xl: 2.25rem; /* 36px — h2 */ --text-5xl: 3rem; /* 48px — h1 */ --text-6xl: 3.75rem; /* 60px — display */ --text-7xl: 4.75rem; /* 76px — hero display */ /* Line heights */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.85; /* Letter spacing */ --tracking-tightest: -0.04em; --tracking-tighter: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.16em; /* For tracked-out small caps */ /* Weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* ---------------------------------------------------------- SPACING SCALE 4/8 grid. Use multiples for layout consistency. ---------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ---------------------------------------------------------- BORDER RADIUS ---------------------------------------------------------- */ --radius-none: 0; --radius-sm: 0.25rem; /* 4px — subtle (badges) */ --radius-md: 0.5rem; /* 8px — buttons, inputs */ --radius-lg: 0.75rem; /* 12px — cards */ --radius-xl: 1rem; /* 16px — modals */ --radius-2xl: 1.5rem; /* 24px — feature cards */ --radius-full: 9999px; /* Pills, avatars */ /* ---------------------------------------------------------- SHADOWS / ELEVATION Warm-tinted shadows so they harmonize with the cream paper. ---------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(16, 44, 75, 0.04); --shadow-sm: 0 1px 3px rgba(16, 44, 75, 0.06), 0 1px 2px rgba(16, 44, 75, 0.04); --shadow-md: 0 4px 6px rgba(16, 44, 75, 0.05), 0 2px 4px rgba(16, 44, 75, 0.04); --shadow-lg: 0 10px 15px rgba(16, 44, 75, 0.08), 0 4px 6px rgba(16, 44, 75, 0.04); --shadow-xl: 0 20px 25px rgba(16, 44, 75, 0.10), 0 10px 10px rgba(16, 44, 75, 0.04); --shadow-2xl: 0 25px 50px rgba(16, 44, 75, 0.16); --shadow-inner: inset 0 2px 4px rgba(16, 44, 75, 0.05); /* Brand-tinted shadow — for hero CTAs, primary cards */ --shadow-coral: 0 8px 24px rgba(169, 38, 84, 0.22); /* ---------------------------------------------------------- MOTION ---------------------------------------------------------- */ --duration-instant: 75ms; --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --ease-linear: cubic-bezier(0, 0, 1, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --z-dropdown: 1000; --z-sticky: 1100; --z-overlay: 1200; --z-modal: 1300; --z-popover: 1400; --z-toast: 1500; --z-tooltip: 1600; } /* ============================================================= DARK MODE Inverts the surface system. Brand colors stay the same; the neutral scale flips. Coral/rose pop against ink backgrounds. ============================================================= */ [data-theme="dark"] { --surface-base: #0B1A2E; --surface-raised: #15243B; --surface-recessed: #07111E; --surface-inverted: var(--color-paper); --text-primary: #F1F2F5; --text-secondary: #C9CCD3; --text-muted: #8B8F9A; --text-disabled: #4F5663; --text-inverted: var(--color-ink); --text-accent: var(--color-coral); /* Coral pops better than rose on dark */ --border-subtle: #2A3447; --border-default: #3D4659; --border-strong: #5C6477; --border-focus: var(--color-coral); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6), 0 10px 10px rgba(0, 0, 0, 0.3); }