/* ============================================================ Aesthetics By Elena — Design Tokens Locked Phase 0 + Phase 1 (2026-05-14). See PLAN.md. ============================================================ */ :root { /* ---------- Color: base palette (OKLCH for safer chroma when deriving variants) ---------- */ --ink: oklch(25.85% 0.0301 318.93); /* #2a1f2d — near-black plum, body text */ --cream: oklch(97.62% 0.0067 53.45); /* #fbf6f3 — page background */ --blush: oklch(90.13% 0.0339 33.77); /* #f4d7d0 — primary surface tint */ --lavender: oklch(83.66% 0.0351 306.25); /* #cfc4dc — secondary surface tint */ --plum: oklch(42.95% 0.0722 343.06); /* #6b3f5a — primary brand / CTA */ --gold: oklch(75.00% 0.0725 75.50); /* #c9a87a — DECORATIVE ONLY; never a text color (fails AA on cream) */ /* ---------- Color: derived state tokens ---------- */ --plum-hover: oklch(48.54% 0.0777 341.28); /* #7d4d6c */ --plum-active: oklch(37.62% 0.0680 342.74); /* #5a324b */ --ink-soft: color-mix(in oklch, var(--ink) 72%, transparent); /* secondary body text — AA on cream */ --text-on-plum: var(--cream); --text-on-blush: var(--ink); --text-on-lavender: var(--ink); --surface-1: var(--cream); --surface-2: oklch(94.90% 0.0144 57.59); /* #f6ece5 — warmer cream, ~halfway to blush */ --surface-3: var(--blush); --border-subtle: rgba(42, 31, 45, 0.08); --border-strong: rgba(42, 31, 45, 0.18); --focus-ring: var(--plum); --focus-ring-offset: var(--cream); /* ---------- Gradients ---------- `cream` stops use `transparent` so that when these gradients sit over a photo (image overlay use case), the cream-side area lets the photo through unobstructed instead of painting a near-white wall on it. In the placeholder use case the page background is --cream anyway, so transparent reveals cream — visually identical. */ --grad-blush-lavender: linear-gradient(135deg, var(--blush) 0%, var(--lavender) 100%); --grad-cream-blush: linear-gradient(180deg, transparent 0%, var(--blush) 100%); --grad-hero: radial-gradient(120% 80% at 30% 20%, var(--blush) 0%, var(--lavender) 55%, transparent 100%); /* ---------- Type: families ---------- */ --font-display: "Fraunces", "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* ---------- Type: fluid scale (1.25 — major third, vp 360→1440) ---------- */ --fs-xs: clamp(0.75rem, 0.708rem + 0.185vw, 0.875rem); /* 12 → 14 */ --fs-sm: clamp(0.875rem, 0.833rem + 0.185vw, 1rem); /* 14 → 16 */ --fs-base: 1rem; /* 16 steady */ --fs-md: clamp(1.125rem, 1.083rem + 0.185vw, 1.25rem); /* 18 → 20 */ --fs-lg: clamp(1.25rem, 1.167rem + 0.370vw, 1.5rem); /* 20 → 24 */ --fs-xl: clamp(1.5rem, 1.333rem + 0.741vw, 2rem); /* 24 → 32 */ --fs-2xl: clamp(1.75rem, 1.500rem + 1.111vw, 2.5rem); /* 28 → 40 */ --fs-3xl: clamp(2.25rem, 1.958rem + 1.296vw, 3.125rem); /* 36 → 50 */ --fs-4xl: clamp(2.75rem, 2.167rem + 2.593vw, 4.5rem); /* 44 → 72 */ --fs-display: clamp(3.25rem, 2.250rem + 4.444vw, 6.25rem); /* 52 → 100 */ /* ---------- Type: line heights ---------- */ --lh-display: 1.02; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.55; --lh-relaxed: 1.7; /* ---------- Type: letter spacing ---------- */ --tracking-tighter: -0.025em; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-widest: 0.14em; /* eyebrow / kicker labels */ /* ---------- Type: weights ---------- */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---------- Spacing scale (4px base) ---------- */ --space-3xs: 0.25rem; /* 4 */ --space-2xs: 0.5rem; /* 8 */ --space-xs: 0.75rem; /* 12 */ --space-sm: 1rem; /* 16 */ --space-md: 1.5rem; /* 24 */ --space-lg: 2rem; /* 32 */ --space-xl: 3rem; /* 48 */ --space-2xl: 4rem; /* 64 */ --space-3xl: 6rem; /* 96 */ --space-4xl: 8rem; /* 128 */ /* ---------- Section rhythm (fluid block padding for major sections) ---------- */ --section-y: clamp(3rem, 2rem + 5vw, 6rem); --section-y-lg: clamp(4rem, 2.5rem + 7vw, 8rem); /* ---------- Containers ---------- */ --container-prose: 40rem; /* 640 — reading copy */ --container: 75rem; /* 1200 — default */ --container-wide: 90rem; /* 1440 — gallery / hero */ --gutter: clamp(1.25rem, 1rem + 2vw, 2.5rem); /* ---------- Radii ---------- */ --radius-xs: 2px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px; --radius-xl: 40px; --radius-pill: 999px; /* ---------- Shadows (subtle, ink-tinted) ---------- */ --shadow-1: 0 1px 2px rgba(42, 31, 45, 0.04), 0 2px 8px rgba(42, 31, 45, 0.04); --shadow-2: 0 4px 16px rgba(42, 31, 45, 0.08), 0 16px 48px rgba(42, 31, 45, 0.06); --shadow-3: 0 24px 64px rgba(42, 31, 45, 0.16), 0 8px 24px rgba(42, 31, 45, 0.08); --shadow-focus: 0 0 0 3px var(--cream), 0 0 0 5px var(--focus-ring); /* ---------- Motion (timing aligned with emil-design-eng) ---------- */ --duration-instant: 80ms; --duration-fast: 180ms; --duration: 240ms; --duration-slow: 320ms; --duration-very-slow: 500ms; --duration-hero: 1200ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* quint-out — refined enter default */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* sharper enter; SplitText reveals + lightbox open */ --ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* exits */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* there-and-back state toggles */ /* ---------- Z-index ladder ---------- */ --z-base: 1; --z-raised: 10; --z-nav: 50; --z-overlay: 80; --z-modal: 100; --z-toast: 150; /* ---------- Layout ---------- */ --header-height: 64px; --header-height-lg: 80px; } /* ---------- Reduced motion: collapse durations to a fast opacity-only fade ---------- */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 200ms; --duration: 200ms; --duration-slow: 200ms; --duration-very-slow: 200ms; --duration-hero: 200ms; --ease-out: linear; --ease-out-expo: linear; --ease-in: linear; --ease-in-out: linear; } }