/* * tokens.css — Authoritative design tokens for the Agent Pack Hub prototype. * * Every color, type size, spacing step, and radius used anywhere in this * prototype is declared once, here, as a CSS custom property. No other file * may declare a design value directly — app.css and component styles must * consume these variables (var(--...)) only. * * Source of truth: .planning/phases/01-catalog-pack-detail/01-UI-SPEC.md * (approved 2026-09-05). This file is the "first authoring" of these values * per CLAUDE.md — if a future change is needed, it goes through * docs/register/QUESTIONS.md, then updates here and the CLAUDE.md design * system block together. */ :root { /* ----------------------------------------------------------------- Color — exactly 5 named roles (CLAUDE.md): surface, ink, accent, muted, danger. surface-secondary and ink-muted are tint/lightened variants of surface/muted, not additional roles. color-border is a low-opacity tint of muted, used only for hairline borders/dividers. ----------------------------------------------------------------- */ --color-surface:#FFFFFF; --color-surface-secondary:#F1F3F6; --color-ink:#1C1F24; --color-ink-muted:#6B7280; --color-accent:#2454B0; --color-danger:#B3261E; --color-border:rgba(107, 114, 128, 0.24); /* ----------------------------------------------------------------- Spacing — 8-point scale. Dense (catalog cards) uses xs/sm/md; open (pack-detail) uses lg/xl/2xl. Same scale, density via which token is chosen, never a second scale. ----------------------------------------------------------------- */ --space-xs:4px; --space-sm:8px; --space-md:16px; --space-lg:24px; --space-xl:32px; --space-2xl:48px; --space-3xl:64px; /* ----------------------------------------------------------------- Typography — exactly 4 sizes, exactly 2 weights, used across both dense and open contexts. ----------------------------------------------------------------- */ --font-family-body:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-family-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-weight-regular:400; --font-weight-semibold:600; --font-size-label:13px; --line-height-label:1.4; --font-size-body:16px; --line-height-body:1.5; --font-size-heading:20px; --line-height-heading:1.2; --font-size-display:28px; --line-height-display:1.15; /* ----------------------------------------------------------------- Radius — single global value, used everywhere a radius is needed this phase (cards, combobox input, combobox popup, buttons). ----------------------------------------------------------------- */ --radius:6px; } /* * View themes (SPEC-035 §4.2, SPEC-060 §5) — a token overlay, never a * separate stylesheet. Each block below overrides exactly one token, * --color-accent, and introduces no sixth color role (D-03). The * attribute is written on by app.js's render loop, from the * resolved view's `theme` field (D-04). The ABSENCE of the attribute is * the default "All Packs" appearance, using the --color-accent value set * in :root above. Both override values were contrast-checked for TEXT * contrast against --color-surface only (clearing WCAG AA 4.5:1) — this * does NOT cover the accent token's other reserved use (the global * :focus-visible ring, app.css) against the demo toolbar's --color-ink * background; the toolbar's own focus ring is pinned to a fixed, * theme-independent color in app.css instead of riding this token, since * the toolbar is explicitly non-product chrome (D-04) and not part of the * three themed views being demonstrated. */ body[data-theme="openai-edu"] { --color-accent:#0F7B57; } body[data-theme="copilot-admin"] { --color-accent:#5B3FA6; }