/* * Design tokens for the Addable Labs website — Direction A, Signal. * * This is the only stylesheet allowed to contain colour literals; every other * CSS file must reference these custom properties (enforced by * `pnpm check:contrast`). The palette, the type choices and the measured * contrast ratios are documented in docs/identity.md. * * Structure (plan D-03, D-13; REQ-006, REQ-024 as amended by A-03): the site * is dark by default. Every colour token is declared twice on :root — a plain * value equal to its dark value, for browsers without light-dark support, * then the light-dark pair (light value first, dark value second) — and * `color-scheme` is the only switch: dark on :root, light only when the * appearance toggle has set the light switch rule below. There is * deliberately no OS-preference media query and no --color-* outside :root; * the contrast gate fails on either. */ :root { color-scheme: dark; /* Colour — light / dark. Fallback first (= dark), then the pair. */ --color-bg: #0B0E10; --color-bg: light-dark(#F7F8F6, #0B0E10); --color-surface: #13181C; --color-surface: light-dark(#FFFFFF, #13181C); --color-surface-2: #1A2126; --color-surface-2: light-dark(#EEF1EC, #1A2126); --color-text: #ECEFF1; --color-text: light-dark(#14191D, #ECEFF1); --color-text-muted: #A6B0BA; --color-text-muted: light-dark(#4D5862, #A6B0BA); --color-accent-text: #83F35D; --color-accent-text: light-dark(#256B15, #83F35D); --color-accent-strong: #A9F78F; --color-accent-strong: light-dark(#1B5210, #A9F78F); --color-secondary-text: #FF8A2E; --color-secondary-text: light-dark(#A84600, #FF8A2E); --color-border: #626E79; --color-border: light-dark(#77828C, #626E79); --color-hairline: #242C33; --color-hairline: light-dark(#D6DBD1, #242C33); --color-focus: #83F35D; --color-focus: light-dark(#A84600, #83F35D); --color-glow: rgba(131, 243, 93, 0.16); --color-glow: light-dark(rgba(131, 243, 93, 0.22), rgba(131, 243, 93, 0.16)); /* Colour — the same in both themes: the brand hues as surfaces and glow, never as text on light (REQ-006), and the dark text that sits on them. */ --color-accent: #83F35D; --color-secondary: #FF6F00; --color-on-accent: #0B0E10; /* Type — JetBrains Mono (self-hosted, fonts.css) for the wordmark, headings, UI, code and the console; the system sans for body copy (D-04). */ --font-mono: "JetBrains Mono", "JetBrains Mono Fallback Menlo", "JetBrains Mono Fallback Consolas", ui-monospace, monospace; --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); --text-display: clamp(2.25rem, 1.3rem + 3.2vw, 4.1rem); /* Spacing, shape, layout and motion */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2.5rem; --space-6: 4rem; --space-7: 6rem; --radius-sm: 6px; --radius: 12px; --radius-lg: 18px; --container: 76rem; --gutter: clamp(1rem, 4vw, 2.5rem); --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur: 380ms; } /* The only switch: the appearance toggle sets data-theme on . */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }