/* ============================================================ NextArc — Design Tokens The entire look lives here. Switch the whole site between themes by setting (or "dark"). Pages and components never hard-code a colour. ============================================================ */ :root { /* —— Dark "Ink & Gold" (default) —— */ --ink: #0B0B0D; /* page background (near-black, faint warmth) */ --surface: #15151A; /* elevated surfaces, footer */ --hairline: #26262C; /* 1px dividers, borders */ --bone: #ECE7DD; /* primary text / headlines (warm off-white) */ --muted: #9A968D; /* secondary text, captions, labels */ --gold: #E2832F; /* accent — the brand's solar orange (matched to the logo flare) */ --gold-deep: #BF6A1F; /* hover / pressed, gradient toe */ --bg: var(--ink); --fg: var(--bone); --accent: var(--gold); /* —— Type families —— */ --display: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* —— Fluid type scale —— */ --fs-hero: clamp(3rem, 1.5rem + 6.2vw, 6.25rem); --fs-h2: clamp(2rem, 1.35rem + 2.6vw, 2.9rem); --fs-h3: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); --fs-lead: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); --fs-body: 1.1875rem; /* 19px */ --fs-small: 0.875rem; /* 14px */ --fs-eyebrow: 0.8125rem; /* 13px */ --lh-tight: 1.04; --lh-snug: 1.16; --lh-body: 1.65; /* —— Space scale —— */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem; --space-7: 9rem; --space-8: 12rem; /* —— Layout —— */ --measure: 40rem; /* prose column ~66ch */ --measure-wide: 52rem; --gutter: clamp(1.5rem, 5vw, 5rem); --maxw: 78rem; /* —— Motion —— */ --ease: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out — the "settle" */ --ease-inout: cubic-bezier(0.7, 0, 0.2, 1); --dur: 1000ms; --dur-fast: 400ms; /* —— Brand asset handling —— */ --logo-blend: screen; /* dark theme: blends the logo's black background away */ color-scheme: dark; } /* —— Light "Bone & Ink" (switch) —— Note: on light, the gold-on-black logo must use its dark-on-light variant (assets/img to be swapped); screen-blend does not apply. v1 ships dark. */ :root[data-theme="light"] { --paper: #F4F1EA; --surface: #FBFAF6; --hairline: #DAD4C7; --ink-2: #1A1814; --muted: #6E685C; --gold: #9C7A2E; --gold-deep:#7D611F; --bg: var(--paper); --fg: var(--ink-2); --accent: var(--gold); --logo-blend: normal; color-scheme: light; }