/* ============================================================ PHAROS — Design Tokens A lighthouse at night. Hushed, vast, vigilant, expensive. The warm light is the ONE accent — it is the lamp itself. ============================================================ */ :root { /* ---- Ground / surfaces (deep midnight, never pure black) ---- */ --ground: #0A1422; /* base canvas */ --deepest: #060D17; /* deepest wells, footer, overlays */ --glass: #122236; /* raised glass panels */ --glass-2: #16293F; /* hover / elevated glass */ --coast: #081120; /* the dark sea band */ /* ---- Text ---- */ --foam: #E8EEF2; /* primary text */ --dim: #8FA3B3; /* secondary text */ --dimmer: #5C6F7E; /* tertiary, captions */ /* ---- Hairlines ---- */ --hair: rgba(255,255,255,0.08); --hair-soft: rgba(255,255,255,0.04); --hair-strong: rgba(255,255,255,0.14); /* ---- THE LIGHT — the single justified accent (the lamp itself) ---- Default palette: "Glacier" (cool ice-white). Swap the whole site by setting data-theme on ; see themes.css. Everything reads these --light-* / --signal-* vars; the --amber/--teal names below are kept only as aliases so legacy rules keep working. ---- */ --light-core: #FFFFFF; /* hottest centre of the lamp */ --light-bright: #EAF6FF; /* bright light, ship sails */ --light: #CFE6F5; /* the light / primary accent */ --light-deep: #6FA8C8; /* darker, for gradients */ --light-glow: rgba(207,230,245,0.55); /* bloom */ --light-haze: rgba(207,230,245,0.14); /* faint wash */ --signal: #4FB8C9; /* cold signal — focus, fine rules */ --signal-dim: rgba(79,184,201,0.45); --signal-haze: rgba(79,184,201,0.10); /* legacy aliases (do not retheme these directly) */ --amber: var(--light); --amber-bright: var(--light-bright); --amber-deep: var(--light-deep); --amber-glow: var(--light-glow); --amber-haze: var(--light-haze); --teal: var(--signal); --teal-dim: var(--signal-dim); --teal-haze: var(--signal-haze); /* ---- Type ---- */ --font-display: "DM Serif Display", "Hoefler Text", Georgia, serif; --font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; /* fluid type scale */ --t-display: clamp(3.2rem, 9vw, 8.5rem); --t-h1: clamp(2.4rem, 5.5vw, 5rem); --t-h2: clamp(1.8rem, 3.4vw, 3.1rem); --t-h3: clamp(1.25rem, 1.8vw, 1.6rem); --t-lead: clamp(1.15rem, 1.5vw, 1.5rem); --t-body: 1.0625rem; --t-small: 0.875rem; --t-micro: 0.72rem; /* tracking */ --track-eyebrow: 0.42em; --track-label: 0.18em; /* ---- Spacing scale ---- */ --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem; --s-5: 4rem; --s-6: 6rem; --s-7: 9rem; --s-8: 13rem; --maxw: 1280px; --maxw-text: 720px; --gutter: clamp(1.25rem, 5vw, 5rem); /* ---- Radii ---- */ --r-sm: 4px; --r-md: 10px; --r-lg: 18px; --r-pill: 999px; /* ---- Elevation (glow, not drop shadow) ---- */ --lift-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 40px -24px rgba(0,0,0,0.8); --lift-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 40px 80px -40px rgba(0,0,0,0.9); --bloom: 0 0 40px -6px var(--amber-glow); /* ---- Motion ---- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --slow: 1.1s; --med: 0.55s; --fast: 0.28s; --nav-h: 68px; }