/* AI Brain design system - tokens (v1.2 "modern AI product, warm-editorial") Senior UI/UX (Taste) redesign pass. Round 4 (advisor critique applied). Source of truth: Cluse & Co 1520 brand guide + talk deck. Deck-true, licence-clean. Type = the real brand Typekit (khy6rof): Contralto Big (display, all-caps, tracked) + Acumin Variable (body). Load the kit in each page BEFORE this file: Warm-editorial, NOT neon-dark. Square edges (radius 0). One locked accent (ochre). Every v1.2 page loads this file first. */ :root{ /* ---------- colour (brand-exact) ---------- */ --ink:#001722; /* marine/ink - primary text, solid bands */ --ink-80:#0A2F3F; /* hover state on ink, mid plane */ --ink-60:#123C4C; /* deepest tint used in imagery */ --stone-60:#66747A; /* secondary text ON WHITE ONLY (4.83:1). Fails AA on clay (4.32) - never body text on clay. */ --stone-body:#586268; /* AA-safe secondary/body text on clay (5.59:1) AND white (6.25:1). The default body-secondary token. */ --stone-30:#B2B9BC; /* borders, tertiary text */ --stone-15:#DDE1E3; /* hairlines, subtle fills */ --off:#F4F2EE; /* clay / page background */ --surface:#FFFFFF; /* cards, forms */ --alert:#8A2F1A; /* errors only */ /* ---------- THE ONE ACCENT (locked page-wide) ---------- Warm ochre / brass. This is the SAME accent baked into every generated image (the ochre riser + hero-sheet edge), so page and imagery read as one system. Contrast: #B67A3D on --ink #001722 ~= 4.6:1 -> AA for large text + graphical marks. USE FOR: graphical accents, riser/rule marks, the accent hairline, focus glow, links + CTA on the ink band, small "free" flag. NEVER as small body text on clay (fails AA there) - for accent text on light use --accent-ink. */ --accent:#B67A3D; /* the ochre - marks, rules, CTA-on-ink, links-on-ink */ --accent-hover:#C98B49; /* lifted ochre for hover on ink */ --accent-ink:#8A5620; /* darkened ochre: AA-safe (4.9:1) for accent TEXT on clay/white */ --accent-wash:#F0E7DA; /* barest ochre tint for section grounds / accent-panel fills */ /* ---------- type ---------- */ /* Contralto Big is an Adobe Font - served only via the Typekit kit above; never self-hosted. */ --font-display:'contralto-big',Georgia,'Times New Roman',serif; --font-body:'acumin-variable',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; --text-xs:.72rem; --text-sm:.82rem; --text-base:15.5px; --text-md:1.06rem; --text-lg:1.35rem; --text-xl:clamp(1.7rem,4vw,2.35rem); --text-2xl:clamp(2.15rem,5.4vw,3.5rem); --text-hero:clamp(2.5rem,6vw,4.1rem); /* landing H1 only */ --track-wide:.16em; /* uppercase labels, lockup */ --track-med:.09em; /* buttons */ --track-display:.085em; /* Contralto Big all-caps display tracking (~0.1em brand rule) */ /* ---------- space ---------- */ --space-1:.35rem; --space-2:.7rem; --space-3:1.05rem; --space-4:1.4rem; --space-6:2.1rem; --space-8:2.8rem; --space-12:4.2rem; --space-16:6rem; --space-20:8rem; /* ---------- shape ---------- */ --radius:0; /* square-edged brand - keep it everywhere */ --border:1px solid var(--stone-30); --border-ink:1px solid var(--ink); --border-accent:1px solid var(--accent); --hairline:1px solid var(--stone-15); /* ---------- layout ---------- */ --measure:660px; /* single reading column */ --measure-wide:900px; /* guide / styleguide column */ --measure-page:1140px; /* full landing sections */ /* ---------- motion ---------- */ --ease:cubic-bezier(.22,.61,.36,1); --reveal-dur:.7s; }