/* ============================================================ ORIGEQ — DESIGN TOKENS ------------------------------------------------------------ The ONLY place brand colours, typography and spacing are defined. When a new design arrives from Claude Design, update the values here first (see design/README.md, step 2). Nothing in this file should reference site structure or content — it is pure design vocabulary. Colour model: :root -> DARK theme (default values) html[data-theme="light"] -> LIGHT theme overrides The site ships in LIGHT mode (set on in base.njk); the header toggle flips between the two and remembers the choice. ============================================================ */ :root { /* ---- Colour · DARK (default) ---- */ --bg: #0a0b0e; /* page background */ --bg-1: #0e1014; /* raised background band */ --bg-2: #14171d; /* deepest panel */ --surface: #11141a; /* cards / tiles */ --line: #232833; /* hairline borders */ --line-2: #353c4a; /* stronger borders */ --text: #ebeef5; /* primary text */ --text-2: #a4abbb; /* secondary text */ --text-3: #636a7a; /* muted / mono labels */ --accent: #4E2EC3; /* Origeq brand purple */ --accent-2: #6f53e0; /* accent hover / lighter */ --accent-ink: #f3f0ff; /* text ON the accent colour */ --grid-line: rgba(78, 46, 195, 0.12); /* blueprint grid */ /* ---- Typography ---- "Industrial" type system from the source design: editorial = Bricolage Grotesque (headlines) display = Manrope (body / UI) mono = JetBrains Mono (labels, specs, numbers) Web fonts are loaded in design/base.njk. Fallbacks keep the page readable before the fonts load or if they fail. */ --f-editorial: "Bricolage Grotesque", "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --f-display: "Manrope", ui-sans-serif, system-ui, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---- Spacing & layout ---- */ --gutter: clamp(20px, 4vw, 56px); /* left/right page padding */ --maxw: 1400px; /* max content width */ --hairline: 1px; /* ---- Motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } html[data-theme="light"] { /* ---- Colour · LIGHT ---- */ --bg: #f4f4ef; --bg-1: #ecede7; --bg-2: #e3e5dd; --surface: #fafaf6; --line: #d3d5cc; --line-2: #b0b4a6; --text: #101218; --text-2: #424754; --text-3: #767c8c; --accent: #4E2EC3; --accent-2: #3a1f9c; --accent-ink: #f5f3ff; --grid-line: rgba(78, 46, 195, 0.13); }