/* ════════════════════════════════════════════════════════════════════════ Ampinity — design tokens as CSS custom properties. Imported verbatim from /artifacts/design-tokens.json (Constitution §I, design-system.md). One accent on screen at a time; the accent swaps by sector via [data-accent] on . ════════════════════════════════════════════════════════════════════════ */ :root { /* ── Colour ── */ --ink-900:#0A0B0D; --ink-850:#0E1013; --ink-800:#121519; --ink-700:#1E232A; --ink-600:#2A313A; --paper-0:#FFFFFF; --paper-50:#F5F6F7; --paper-100:#E9EBED; --paper-200:#D4D8DC; --thread-base:#27E1FF; --thread-deep:#0A7E99; --verdant-base:#2BD17E; --verdant-deep:#11935A; --ember-base:#FF7A3C; --ember-deep:#C8501C; --graphite-base:#8B96A3; --graphite-deep:#5A636E; --on-ink-hi:#F2F4F6; --on-ink-mid:#AEB6BF; --on-ink-lo:#6B747E; --on-paper-hi:#0A0B0D; --on-paper-mid:#454C54; --on-paper-lo:#6B747E; --success:#2BD17E; --warning:#F5B544; --danger:#FF5247; --focus:#27E1FF; /* ── Accent (default = the connective thread, cyan). Swapped per sector. ── */ --accent:var(--thread-base); --accent-deep:var(--thread-deep); /* AA-safe accent shade for small accent TEXT on the light/paper surface (the token *.deep values sit at ~4.3:1 on paper — just under AA for small text; these clear 4.5:1 for eyebrows/labels). Decorative marks/lines still use --accent / --accent-deep. */ --thread-ink:#096780; --verdant-ink:#0C7A48; --ember-ink:#A8410F; --graphite-ink:#454C54; --accent-ink:var(--thread-ink); /* ── Type ── */ --font-logotype:"DOVENS BOLD","Söhne","Geist",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --font-display:"Söhne","Geist",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --font-text:"Söhne","Geist",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --font-mono:"Söhne Mono","JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace; /* ── Type scale (fluid) ── */ --t-display-2xl:clamp(3.5rem,8vw,8rem); --t-display-xl:clamp(2.75rem,6vw,5.5rem); --t-h1:clamp(2.25rem,4vw,3.5rem); --t-h2:clamp(1.75rem,3vw,2.5rem); --t-h3:1.5rem; --t-h4:1.25rem; --t-body-lg:1.125rem; --t-body:1rem; --t-caption:0.875rem; --t-eyebrow:0.8125rem; --t-mono-spec:0.875rem; /* ── Space (4px ramp) ── */ --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;--s-11:160px;--s-12:192px; /* ── Radius / border ── */ --r-none:0; --r-sm:2px; --r-md:4px; --b-hairline:1px; --b-thread:2px; /* ── Container / grid ── */ --container-max:1280px; --container-wide:1600px; --gutter:clamp(16px,4vw,64px); --grid-cols:12; /* ── Motion ── */ --dur-fast:120ms; --dur:220ms; --dur-slow:420ms; --dur-cine:900ms; --ease-standard:cubic-bezier(0.2,0,0,1); --ease-in-out:cubic-bezier(0.65,0,0.35,1); --ease-cine:cubic-bezier(0.16,1,0.3,1); --reveal-y:16px; --reveal-stagger:60ms; /* ── Elevation (materiality from hairlines + light, not heavy shadow) ── */ --elev-1:0 1px 0 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.35); --elev-focus:0 0 0 2px #0A0B0D, 0 0 0 4px #27E1FF; /* ── Z-index ── */ --z-sticky:100; --z-header:200; --z-megamenu:300; --z-overlay:400; --z-modal:500; } /* Accent swaps — one sector → one accent (design-system §2). */ [data-accent="thread"] { --accent:var(--thread-base); --accent-deep:var(--thread-deep); --accent-ink:var(--thread-ink); } [data-accent="verdant"] { --accent:var(--verdant-base); --accent-deep:var(--verdant-deep); --accent-ink:var(--verdant-ink); } [data-accent="ember"] { --accent:var(--ember-base); --accent-deep:var(--ember-deep); --accent-ink:var(--ember-ink); } /* Defence: graphite/steel only — no glow, no accent pop, ever. */ [data-accent="graphite"] { --accent:var(--graphite-base); --accent-deep:var(--graphite-deep); --accent-ink:var(--graphite-ink); }