/* ========================================================================== ContactMatch design tokens. This file is the IMPLEMENTATION of docs/design/DESIGN-tokens.md (RATIFIED 2026-08-16, D3, on the accent choice in BESLUT #55). It is the only file in app/static that may hold a raw colour, size or duration: every component stylesheet and every template refers to a token NAME. Changing a value is a change to the design document first and to this file second, and a colour change re-runs the CVD check in DESIGN-tokens.md 8. Names are semantic, never appearance-describing (--bg-surface, not --white), which is what makes a dark THEME a redefinition of this block rather than a rewrite of the components (DESIGN-tokens.md 1 and 9). ========================================================================== */ :root { /* Dark-mode resilience, rule 1 (DESIGN-riktning 9.2): the page states the scheme it is drawn for instead of leaving the browser to guess. It is the only mechanism that stops a dark browser from repainting form controls, scrollbars and default surfaces on its own. Light is the base; a dark theme (optional per BESLUT #53) would redefine the values below. */ color-scheme: light; /* --- Colour, base (DESIGN-tokens.md 2) — warm neutral ------------------ */ --bg-app: #f7f5f2; --bg-surface: #ffffff; --bg-sunken: #efece7; --border: #e3ded7; --border-strong: #cdc6bc; --text-primary: #22201d; --text-secondary: #5f5a53; /* #857e75 until 2026-08-27. It measured 3.40-4.01:1 against the three page grounds while carrying the product's SMALLEST text (11.5 px .note/.micro), and those lines are real sentences -- the cadence explanation, "What you correct stays corrected", the review-queue link -- not decoration. The value below is the LIGHTEST (most damped) colour on the same hue and saturation that clears 4.5:1 against all three grounds: one 8-bit step lighter on green drops --bg-sunken to 4.49:1. Damping is therefore kept by construction rather than by luck; the ladder primary < secondary < muted still holds on every ground (measurements in eval/reports/TEXTMUTED-2026-08-27.md, script scratch/textmuted_pick_0827.py). */ --text-muted: #706a63; /* --- Colour, roles (DESIGN-tokens.md 3) ------------------------------- */ --action: #0e5f63; --action-hover: #0a4a4d; --on-action: #ffffff; --action-surface: #e0eeef; --on-action-surface: #0b4b4e; --find: #90552a; --on-find: #ffffff; --attention: #452217; --on-attention: #ffffff; --attention-surface: #f8ece2; --focus: #0e5f63; /* --- Status chips (DESIGN-tokens.md 4) — a LIGHTNESS LADDER ----------- */ --chip-new-bg: #90552a; --chip-new-ink: #ffffff; --chip-updated-bg: #a1bec0; --chip-updated-ink: #0b4b4e; --chip-review-bg: #452217; --chip-review-ink: #ffffff; --chip-blocked-bg: #f6f4f2; --chip-blocked-ink: #55524e; /* The rung between "nothing to do here" and "still working" (BESLUT #74): a site we read part of the way. It is a damped sibling of --find rather than the find colour itself -- the copper stays the colour of a result -- and it sits on the warm axis so that the ladder separates it from the teal --chip-updated for a red/green colour-blind reader on hue as well as on lightness. Relative luminance 0.635, between 0.907 (blocked) and 0.482 (updated); the ink measures 9.16:1 on it. Under simulated protanopia and deuteranopia the separation from both neighbours SURVIVES rather than collapsing (dE 19.4 -> 19.0 / 19.9 against blocked, 25.4 -> 18.4 / 24.8 against updated), which is the property the pair was picked for. Method, numbers and script: eval/reports/BUDGETEXHAUSTED-YTA-2026-08-30.md §4. */ --chip-partial-bg: #e4cdb4; --chip-partial-ink: #452217; /* --- Dataviz (DESIGN-tokens.md 5) ------------------------------------- */ --data-series-1: #123f47; --data-series-2: #8a4f1f; --data-series-3: #4a7f86; --data-series-4: #b58346; --data-series-5: #9ec2c6; --data-series-6: #e8d3a8; /* --- Typography (DESIGN-tokens.md 6) ---------------------------------- Inter and JetBrains Mono are the ratified faces, both SIL OFL 1.1 and both meant to be SELF-HOSTED. The binaries are not in the repository yet, so the stacks below fall through to the documented fallback until the asset drop lands (app/static/fonts/README.md); no external font call is made from the product surface in either state. */ --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Six steps, not twelve. Headings carry WEIGHT rather than size. */ --text-display-size: 40px; --text-display-line: 1.12; --text-display-weight: 640; --text-h1-size: 22px; --text-h1-line: 1.25; --text-h1-weight: 620; --text-h2-size: 17px; --text-h2-line: 1.3; --text-h2-weight: 620; --text-body-size: 15px; --text-body-line: 1.5; --text-body-weight: 400; --text-dense-size: 13px; --text-dense-line: 1.45; --text-dense-weight: 400; --text-micro-size: 11.5px; --text-micro-line: 1.4; --text-micro-weight: 400; --text-micro-tracking: 0.05em; /* --- Rhythm, shape, motion (DESIGN-tokens.md 7) ------------------------ One 4 px grid. The product surface uses steps 1-4; logged-out surfaces use roughly the double step (5-8). That is the whole mechanism behind "compact inside, roomy outside" (BESLUT #53). */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; /* Shadows are reserved for what actually floats. Tables, cards and panels are separated by a LINE. */ --shadow-pop: 0 2px 8px rgba(34, 32, 29, .12), 0 0 0 1px rgba(34, 32, 29, .06); --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --motion-ease: cubic-bezier(.2, 0, 0, 1); /* A row's clickable target does not shrink with the row height. */ --hit-min: 44px; } /* The motion disappears, the information stays (DESIGN-tokens.md 7). */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; } }