/* ========================================================================== Layer 2: Color System — OKLCH auto-generated palettes + semantic tokens Every scale generated from a single hue + chroma input. Theme by overriding the inputs in your theme file. ========================================================================== */ :root { /* --- Brand inputs (override in theme) --- */ --brand-hue: 24; --brand-chroma: 0.18; /* --- Brand scale --------------------------------------------------------- Hue ROTATES with lightness rather than sitting at one value: 246 at the dark end down to 229 at the light end. A ramp pinned to a single hue looks synthetic at the extremes, because real pigment warms as it lightens. Chroma peaks in the mid-tones and falls away at both ends, for the same reason. The anchors are exact: 400 = #67B8DC, 500 = #438FB9, 600 = #347aa6, 700 = #2B648C, 800 = #225278. 800/700/600 are the three stops of --grad-deep, in order. ⚠️ Do NOT collapse this back to `var(--brand-chroma) var(--brand-hue)` per step. The previous ramp did that at hue 230 with a flat 0.09 chroma, which put --color-secondary ten lightness points darker than it should be and made every gradient read heavy. --brand-hue still drives the neutral ramp and --color-page; --brand-chroma is now unused by this scale and kept only as the neutral//theme reference point. */ --brand-25: oklch(98.5% 0.006 236); --brand-50: oklch(96.5% 0.012 243); --brand-100: oklch(93% 0.025 242); --brand-200: oklch(87% 0.045 238); --brand-300: oklch(82% 0.075 232); --brand-400: oklch(74.5% 0.095 229); --brand-500: oklch(62% 0.098 236); --brand-600: oklch(55.5% 0.098 240); --brand-700: oklch(48.5% 0.088 242); --brand-800: oklch(42.5% 0.082 245); --brand-900: oklch(30% 0.07 246); --brand-950: oklch(18% 0.055 246); /* --- Neutral scale (brand-tinted greys) --- */ --neutral-50: oklch(97% 0.01 var(--brand-hue)); --neutral-100: oklch(93% 0.01 var(--brand-hue)); --neutral-200: oklch(87% 0.01 var(--brand-hue)); --neutral-300: oklch(78% 0.015 var(--brand-hue)); --neutral-400: oklch(68% 0.015 var(--brand-hue)); --neutral-500: oklch(55% 0.015 var(--brand-hue)); --neutral-600: oklch(45% 0.015 var(--brand-hue)); --neutral-700: oklch(37% 0.01 var(--brand-hue)); --neutral-800: oklch(28% 0.01 var(--brand-hue)); --neutral-900: oklch(20% 0.01 var(--brand-hue)); --neutral-950: oklch(14% 0.01 var(--brand-hue)); /* --- Success scale (generated from single hue) --- */ --success-hue: 145; --success-chroma: 0.15; --success-light: oklch(93% 0.04 var(--success-hue)); --success-mid: oklch(55% var(--success-chroma) var(--success-hue)); --success-dark: oklch(35% var(--success-chroma) var(--success-hue)); /* --- Warning scale (generated from single hue) --- */ --warning-hue: 75; --warning-chroma: 0.15; --warning-light: oklch(93% 0.06 var(--warning-hue)); --warning-mid: oklch(65% var(--warning-chroma) var(--warning-hue)); --warning-dark: oklch(40% var(--warning-chroma) var(--warning-hue)); /* --- Danger/error scale (generated from single hue) --- */ --danger-hue: 25; --danger-chroma: 0.18; --danger-light: oklch(93% 0.04 var(--danger-hue)); --danger-mid: oklch(55% var(--danger-chroma) var(--danger-hue)); --danger-dark: oklch(35% var(--danger-chroma) var(--danger-hue)); /* --- Info scale (generated from single hue) --- */ --info-hue: 240; --info-chroma: 0.15; --info-light: oklch(93% 0.04 var(--info-hue)); --info-mid: oklch(55% var(--info-chroma) var(--info-hue)); --info-dark: oklch(35% var(--info-chroma) var(--info-hue)); /* --- Semantic tokens (what components reference) --- */ --color-primary: var(--brand-500); --color-primary-content: #fff; --color-secondary: var(--brand-800); --color-accent: var(--brand-400); /* --color-page is the ground the page sits on; --color-surface is what sits ON it (cards, panels, .block.tint sections, the nav). They were both #fff, which made .block.tint a no-op and flattened the whole site to one plane. Keep them different. */ --color-page: oklch(97.5% 0.006 var(--brand-hue)); --color-surface: #fff; --color-surface-alt: var(--brand-50); --color-surface-dark: var(--brand-950); /* --- Contrast-aware inks (WCAG AA, 2026-09-16) ------------------------------ These are the ONLY place the eyebrow / link / primary-button colours are set. Defaults below are the LIGHT-ground values (on white, tint or the page ground). A dark section redefines them for everything inside it, and a light card inside a dark section resets them back — both lists live in ONE block in components.css, under "Contrast-aware ink contexts". Custom properties INHERIT, so this works regardless of selector specificity: `.section-head .eyebrow` (0,2,0) and a `:where(.cc2-deep)` context rule no longer fight, because only ONE of them sets a colour and the other sets the value it reads. That is the whole reason this is a token and not a second colour rule. ⚠️ THE EYEBROW IS brand-700, NOT THE TRIAL'S brand-600. The trial measured against WHITE only, where brand-600 is 4.68:1 and passes. But an eyebrow also sits on `--color-page` (4.36:1) and on `.block.tint` = --brand-50 (4.24:1) — BOTH BELOW the 4.5:1 bar. The eyebrow is --text-md (15-16px) bold, which is NOT WCAG "large text" (that needs 18.66px+ bold), so 4.5:1 is the bar and 3:1 does not apply. brand-700 is the first step that clears every light ground the site actually uses. Do not "restore" brand-600. */ --eyebrow-ink: var(--brand-700); /* 6.33:1 white · 5.89:1 page ground · 5.73:1 tint */ --link-ink: var(--brand-700); /* same, and the worst case is the tint at 5.73:1 */ --btn-primary-bg: var(--grad-primary); --btn-primary-ink: var(--color-primary-content); --color-ink: var(--neutral-900); --color-ink-soft: var(--neutral-500); --color-ink-muted: var(--neutral-400); --color-border: var(--neutral-200); --color-border-soft: var(--neutral-100); --color-success: var(--success-mid); --color-warning: var(--warning-mid); --color-danger: var(--danger-mid); --color-info: var(--info-mid); }