/* Design tokens. Two tiers: OKLCH primitives (--lch-*), then semantic tokens (--color-*, --text-*, …). Component CSS uses the semantic tier only — see .claude/DESIGN.md § Colour. Primitives are bare "L C H" triplets so alpha can be composed at point of use: oklch(var(--lch-slate-24) / 0.94). The palette is WARMLUFT's: the cool near-neutral slate ramp (hue 286) and the brand red, both 1:1 from warmluft.dk's colors.css. Three themes. Dark and white are one set of tokens written with light-dark(): the OS decides by default, and [data-theme] pins one by setting color-scheme. Blueprint is not a light or dark variant of anything, so it redefines the semantic tier in its own block. Nothing below the semantic tier knows any of this — a component never mentions a theme. */ :root { color-scheme: light dark; /* Slate ramp, named by lightness. 35/41/57/83/93 are warmluft.dk's own steps; the rest were cut from the same hue and chroma band for the drawing sheet and the white theme. Add a step when a component needs it, not before. */ --lch-slate-24: 24% 0.004 286; --lch-slate-29: 29% 0.004 286; --lch-slate-30: 30% 0.006 286; --lch-slate-35: 34.9% 0.0034 286.2; --lch-slate-38: 38% 0.0034 286.2; --lch-slate-41: 41% 0.0033 286.3; --lch-slate-42: 42% 0.004 286; --lch-slate-57: 57.4% 0.0061 286.2; --lch-slate-62: 62% 0.006 286; --lch-slate-64: 64% 0.006 286; --lch-slate-83: 83.4% 0.0069 286.2; --lch-slate-86: 86% 0.005 286; --lch-slate-88: 88% 0.007 286; --lch-slate-915: 91.5% 0.004 286; --lch-slate-93: 92.6% 0.0067 286.3; --lch-slate-935: 93.5% 0.004 286; --lch-slate-965: 96.5% 0.003 286; --lch-slate-99: 99% 0.002 286; --lch-white: 100% 0 0; /* Blueprint ramp, hue 258 — the cyanotype blue, kept clear of the slate's 286 so the two never read as the same colour family. */ --lch-blue-25: 25% 0.075 258; --lch-blue-29: 29% 0.085 258; --lch-blue-35: 35% 0.105 258; --lch-blue-40: 40% 0.1 258; --lch-blue-45: 45% 0.09 255; --lch-blue-70: 70% 0.06 245; --lch-blue-72: 72% 0.07 245; --lch-blue-87: 87% 0.04 240; --lch-blue-95: 95% 0.025 235; --lch-blue-97: 97% 0.015 240; /* Accents. Red is the brand and the one loud colour: START, the active nav tab, rank 1. Orange is "behind" — deltas to the record, a wrong guess — and needs a darker step on white to stay legible. */ --lch-red: 60.3% 0.204 28.6; --lch-red-bright: 65.4% 0.232 28.7; --lch-orange: 75.05% 0.1791 58.3; --lch-orange-deep: 55% 0.15 55; --lch-amber: 80% 0.15 70; /* Surfaces, light-dark(white theme, dark theme). The sheet is the framed drawing sheet every view sits on; the bar is the header and anything that floats over a drawing. */ --color-bar: light-dark(oklch(var(--lch-slate-99)), oklch(var(--lch-slate-24))); --color-panel: light-dark(oklch(var(--lch-slate-99) / 0.95), oklch(var(--lch-slate-24) / 0.94)); --color-page: light-dark(oklch(var(--lch-slate-935)), oklch(var(--lch-slate-29))); --color-page-grid: light-dark(oklch(var(--lch-slate-915)), oklch(var(--lch-slate-35))); --color-inset: light-dark(oklch(var(--lch-slate-935)), oklch(var(--lch-slate-29))); --color-sheet: light-dark(oklch(var(--lch-slate-965)), oklch(var(--lch-slate-35))); --color-sheet-grid: light-dark(oklch(var(--lch-slate-915)), oklch(var(--lch-slate-38))); /* Rules. Two weights, as on a drawing: the structural rule frames the sheet and divides title-block cells; the hairline divides rows inside a cell. */ --color-rule: light-dark(oklch(var(--lch-slate-62)), oklch(var(--lch-slate-57))); --color-hairline: light-dark(oklch(var(--lch-slate-86)), oklch(var(--lch-slate-41))); /* Ink, strongest → faintest. ink-faint is below 4.5:1 on the sheet: centre lines, row numbers and other marks only, never running text. */ --color-ink: light-dark(oklch(var(--lch-slate-24)), oklch(var(--lch-slate-93))); --color-ink-dim: light-dark(oklch(var(--lch-slate-42)), oklch(var(--lch-slate-83))); --color-ink-faint: light-dark(oklch(var(--lch-slate-62)), oklch(var(--lch-slate-64))); --color-drawing-line: light-dark(oklch(var(--lch-slate-30)), oklch(var(--lch-slate-88))); --color-accent: oklch(var(--lch-red)); --color-accent-hover: oklch(var(--lch-red-bright)); --color-on-accent: oklch(var(--lch-white)); --color-accent-wash: light-dark(oklch(var(--lch-red) / 0.12), oklch(var(--lch-red) / 0.18)); --color-behind: light-dark(oklch(var(--lch-orange-deep)), oklch(var(--lch-orange))); /* Type. One family, Archivo (OFL, self-hosted), carried by its width axis: condensed for titles and the clock, wide for the wordmark, nav and labels. No monospace face anywhere — digits align with tabular-nums instead. */ --font: 'Archivo', system-ui, sans-serif; --stretch-condensed: 75%; --stretch-normal: 100%; --stretch-wide: 112%; --weight-normal: 400; --weight-medium: 600; --weight-bold: 700; --weight-heavy: 800; --text-2xs: 0.625rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.875rem; --text-2xl: 2.75rem; --text-clock: clamp(2.75rem, 2rem + 3vw, 5rem); --leading-tight: 1; --leading: 1.5; /* The label idiom: the small, tracked caps that head every title-block cell. */ --label-size: var(--text-2xs); --label-weight: var(--weight-medium); --label-tracking: 0.08em; /* Shape. Square corners throughout — this is a drawing sheet. The frame is a rule plus an offset outline, the double edge of a sheet border. */ --rule-width: 1px; --frame-offset: 5px; --grid-size: 32px; --inline-space: 1ch; --block-space: 1rem; --bar-height: 3.5rem; } :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="white"] { color-scheme: light; } /* Blueprint: white lines on cyanotype blue. Red stays the accent — a red pencil mark on a blueprint is exactly what it looks like. */ :root[data-theme="blue"] { color-scheme: dark; --color-bar: oklch(var(--lch-blue-25)); --color-panel: oklch(var(--lch-blue-25) / 0.94); --color-page: oklch(var(--lch-blue-29)); --color-page-grid: oklch(var(--lch-blue-35)); --color-inset: oklch(var(--lch-blue-29)); --color-sheet: oklch(var(--lch-blue-35)); --color-sheet-grid: oklch(var(--lch-blue-40)); --color-rule: oklch(var(--lch-blue-72)); --color-hairline: oklch(var(--lch-blue-45)); --color-ink: oklch(var(--lch-blue-97)); --color-ink-dim: oklch(var(--lch-blue-87)); --color-ink-faint: oklch(var(--lch-blue-70)); --color-drawing-line: oklch(var(--lch-blue-95)); --color-accent-wash: oklch(var(--lch-red) / 0.25); --color-behind: oklch(var(--lch-amber)); }