/* ============================================================ tokens.css — every value you'd want to tweak lives here. Load this BEFORE main.css. ============================================================ */ :root{ /* --- palette — steel-leaning pastels ---------------------- */ --antacid:#d6e5ec; --antacid-deep:#a8c6d8; --pink:#eedbe4; --pink-deep:#d9b3c6; --blue:#3c5877; --blue-soft:#93a9c2; --petrol:#5f8698; --petrol-soft:#a3c0cf; /* --- surfaces & text ------------------------------------ */ --paper:#f7f7f7; --card:#ffffff; --ink:#293748; --ink-dim:#697d90; --line:rgba(63,91,125,.14); /* --- active accent (swapped by the colour switcher) ------ */ --accent:var(--petrol); --accent-soft:var(--antacid); /* --- type ----------------------------------------------- */ --font-display:'Fraunces', Georgia, serif; --font-body:'Karla', system-ui, sans-serif; --font-mono:'Space Grotesk', monospace; --fs-xs:11px; --fs-sm:13px; --fs-base:14px; --fs-md:17px; --fs-lg:24px; --fs-hero:clamp(38px, 7vw, 62px); /* --- spacing & shape ------------------------------------ */ --gap:14px; --pad-card:20px; --pad-section:56px; --wrap:1080px; --r:18px; --r-sm:14px; /* --- depth ---------------------------------------------- */ --shadow:0 1px 2px rgba(43,58,74,.05), 0 10px 30px -18px rgba(43,58,74,.35); --shadow-lift:0 2px 4px rgba(43,58,74,.06), 0 22px 44px -22px rgba(43,58,74,.45); /* --- motion --------------------------------------------- */ --ease:cubic-bezier(.16,1,.3,1); --dur-fast:.18s; --dur:.35s; } /* accent themes — applied to */ [data-accent="petrol"]{ --accent:var(--petrol); --accent-soft:var(--antacid); } [data-accent="pink"] { --accent:var(--pink-deep); --accent-soft:var(--pink); } [data-accent="blue"] { --accent:var(--blue); --accent-soft:var(--blue-soft); }