/* ============================================================ LUMEN — Color & Type Foundations Premium · editorial · confident. Warm gold, deep ink, cream. Core identity stays constant; each vertical adds ONE accent. ============================================================ */ :root { /* ---- Core palette (constant everywhere) ---- */ --cream: #F8F4EC; --cream-2: #F1E9DA; --cream-3: #EAE0CE; --paper: #FFFFFF; --ink: #16130F; --ink-2: #4F4940; --ink-3: #857C6E; --on-dark: #F4EFE5; --on-dark-2: #B7AE9E; --gold: #D8A22B; --gold-deep: #B27F16; --gold-soft: #F4E2B0; --line: rgba(22,19,15,0.12); --line-strong: rgba(22,19,15,0.85); --line-on-dark: rgba(244,239,229,0.16); /* ---- Vertical accent (override on a per-page ) ---- */ --accent: var(--gold); --accent-deep: var(--gold-deep); --accent-soft: var(--gold-soft); /* ---- Type families ---- */ --serif: "Playfair Display", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* ---- Type scale (fluid; mobile-first) ---- */ --fs-display: clamp(3rem, 9vw, 6.5rem); --fs-h1: clamp(2.25rem, 6vw, 4rem); --fs-h2: clamp(1.75rem, 4vw, 2.75rem); --fs-h3: clamp(1.3rem, 2.6vw, 1.75rem); --fs-lead: clamp(1.1rem, 1.8vw, 1.45rem); --fs-body: 1.0625rem; --fs-sm: 0.9375rem; --fs-eyebrow: 0.78rem; /* ---- Spacing scale (4px base) ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ---- Radii ---- */ --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 18px; --r-pill: 999px; /* ---- Shadows ---- */ --shadow-sm: 0 1px 2px rgba(22,19,15,0.05); --shadow-md: 0 10px 30px rgba(22,19,15,0.08); --shadow-lg: 0 24px 60px rgba(22,19,15,0.12); /* ---- Motion ---- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 0.55s; --maxw: 1200px; --gutter: clamp(20px, 5vw, 64px); } /* ==================== SEMANTIC TYPE ==================== */ .display { font-family: var(--serif); font-weight: 800; font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.015em; color: var(--ink); } .h1 { font-family: var(--serif); font-weight: 700; font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.01em; color: var(--ink); } .h2 { font-family: var(--serif); font-weight: 600; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.005em; color: var(--ink); } .h3 { font-family: var(--serif); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; color: var(--ink); } .lead { font-family: var(--sans); font-weight: 400; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); } .body { font-family: var(--sans); font-weight: 400; font-size: var(--fs-body); line-height: 1.65; color: var(--ink-2); } .eyebrow { font-family: var(--sans); font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-deep); } .caption { font-family: var(--sans); font-weight: 500; font-size: var(--fs-sm); color: var(--ink-3); } .wordmark { font-family: var(--serif); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }