/* ============================================================ DATA — Semantic theme layer (--ui-*) · light default + dark From the DATA Design System (tokens/theme.css); this is the theme.css the components have been reaching for. The raw palette stays in tokens.css; components consume --ui-* names. Dark mode = :root[data-theme="dark"], toggled by a button and persisted (localStorage "data-theme"), applied pre-paint. Dark values are the ADR-0004 proposal (Amy to ratify — Q3). ============================================================ */ :root { /* ---- Surfaces ---------------------------------------------- */ --ui-bg: var(--data-white); /* page background */ --ui-panel: var(--data-white); /* cards / raised panels */ --ui-surface: var(--data-surface); /* subtle fills / bands */ --ui-header-bg: rgba(255,255,255,.92); /* sticky header + blur */ /* ---- Text --------------------------------------------------- */ --ui-text: var(--data-ink); --ui-text-muted: var(--data-muted); --ui-text-muted-strong: #4d5358; /* PROPOSED (Q13) — coolGray-70. Was #5a6167 until 27 Aug 2026; cd swept to this after reading the Figma token page. It RAISES contrast — 6.287 to 7.796 on --ui-bg, 5.709 to 7.080 on --ui-surface — so nothing regresses. (cd, TOKENS_FROM_FIGMA.md) */ /* PROPOSED (Q14) — the type system has no monospace; .prose carries code once news ships. cd proposes Roboto Mono 400, self-hosted, code-only. Until Amy rules this is a temporary alias to the data face, per cd's own fallback plan — the tinted background still reads as code. NOT a decision: swap the value when Q14 lands, nothing else changes. */ --font-mono: var(--font-data); /* ---- Lines --------------------------------------------------- */ --ui-border: var(--data-line); /* PROPOSED (new token, Amy's to ratify) — coolGray-50, for CONTROL boundaries only. WCAG 1.4.11 wants 3:1 for a boundary that identifies a control; --ui-border is a deliberate hairline at ~1.2-1.4:1 and must stay that way, because raising it would coarsen every card edge on the site to fix three components (cd, CONTRAST_PAIRS §3). Use on: the form-input border (data.css), the toggle track and the progress-step connector. NOT on card edges — those are decorative and exempt. Measured, and cb's arithmetic agrees with cd's to three decimals: 3.344 on --ui-bg, 3.037 on --ui-surface. cd's first proposal #767676 was the WCAG reference grey and off-ramp; this is the lowest ramp step clearing both. Not redefined in the dark block below, and that is deliberate rather than forgotten: the same value gives 5.445 / 5.188 / 4.922 on the dark bg, surface and panel. */ --ui-border-strong: #878d96; /* PROPOSED (Q-new) — coolGray-50. CONTRAST_PAIRS §3. Control boundaries ONLY: .field__input's border, the .control__track fill and the .progress__step connector. NOT card edges — raising --ui-border would coarsen every hairline on the site to fix three components, which is what §3 exists to prevent. Disabled controls are exempt and keep --ui-border (.tab:disabled and .pagination__item:disabled use it as a TEXT colour). NO DARK OVERRIDE, and that is measured rather than forgotten: #878d96 clears 3:1 on every surface in BOTH themes — light 3.344 / 3.344 / 3.037 on --ui-bg / --ui-panel / --ui-surface, dark 5.445 / 4.922 / 5.188. One value answers both, which makes Amy's row a smaller decision than a paired one. */ /* ---- Brand ---------------------------------------------------- */ --ui-brand: var(--data-green); --ui-on-brand: var(--data-white); --ui-brand-soft: rgba(57,98,80,.06); /* ghost-button hover wash */ /* ---- Bands (brand-green in BOTH themes → white text on them) -- */ --ui-cta-bg: var(--data-green); /* ---- Footer (dark slate band — an Amy choice, not page surface) */ --ui-footer-bg: #333a40; /* PROPOSED (cd, ADMIN_RESKIN_SPEC §6) — a sixth row for Amy, with --ui-border-strong. Brand green readable on a DARK band in EITHER theme, which no existing token expresses: --ui-brand is #396250 in light and lands at 1.669:1 on the band — an invisible dot — while --ui-dot-green has the same light value. Fixed across themes on purpose: the band is dark in both, so the accent must not flip with them. 5.196:1 on #333a40, 8.418:1 on #0e1316. */ --ui-footer-accent: #6fbe92; --ui-footer-text: #eef1f3; --ui-footer-muted: #aab3b9; /* ---- Motif -------------------------------------------------- */ --ui-dot-green: var(--data-green); /* motif primary dot; brightens in dark */ /* ---- Danger (PROPOSED — Q7, not yet ratified; DATA has no red) */ --ui-danger: #b3261e; --ui-on-danger: #ffffff; } /* ---- Dark theme (ADR-0004 proposal, "a la the dashboard") ----- */ :root[data-theme="dark"] { --ui-bg: #11161a; --ui-panel: #1a2024; --ui-surface: #161b1f; --ui-header-bg: rgba(17,22,26,.92); --ui-text: #e7ebee; --ui-text-muted: #8a949b; --ui-text-muted-strong: #8a949b; /* dark already passes; no change */ --ui-border: #2b3439; --ui-brand: #6fbe92; /* brightened brand green for contrast */ --ui-on-brand: #0c1612; --ui-brand-soft: rgba(111,190,146,.12); --ui-cta-bg: #14342a; /* deep green band on dark */ --ui-footer-bg: #0e1316; --ui-footer-accent: #6fbe92; /* deliberately NOT flipped — see the light block */ --ui-footer-muted: #8a949b; --ui-dot-green: #6fbe92; --ui-danger: #f2b8b5; --ui-on-danger: #2c0b08; }