/* ========================================================= @cal/ui — Design Tokens · PURE ALIAS LAYER --------------------------------------------------------- This file no longer holds a single hardcoded value. cal-brand.css is the one source of truth for colour, type, spacing, radius, shadow and motion. Everything below is a --cal-* name pointing at its brand equivalent, so the ~23 hand-written surfaces and 3,968 generated DPA pages that already reference --cal-* keep working untouched and silently resolve to the brand value. Per handoff/DECISION-2026-08-22-type-scale.md (2026-08-22): - cal-brand.css wins. The fixed 72px/48px scale is retired; brand's fluid --fs-display covers marketing. - This file KEEPS ITS FILENAME on purpose. The rollback is one command, no archaeology: git checkout pre-token-convergence-2026-08-22 -- packages/ui/src/tokens.css Deprecating the --cal-* names themselves is a separate, later, unhurried job. Do not start it here. ========================================================= */ /* The alias layer is meaningless without the file it aliases. @import must precede every other rule in the file. cal-brand.css is a SIBLING of this file, deliberately. It used to live in brand/, which does not survive deployment: nginx aliases exactly one location, /packages/ui/, and `deploy statics` copies only packages/ui. An import reaching outside this directory resolves in the repo and 404s in production, which would leave every --cal-* token undefined on roughly 23 surfaces and 3,968 generated DPA pages. Moved 2026-08-23 per the amendment to handoff/DECISION-2026-08-22-type-scale.md: the shipping tokens live where the shipping code lives; brand/ keeps the documentation. No nginx change, no build step, no 404 risk. */ @import url("./cal-brand.css"); :root { /* ---------- Legacy base names, kept so no surface breaks ---------- These six are the pre-v3 vocabulary. cal-brand.css owns --paper, --ink, --green, --green-deep, --serif, --sans, --mono and --max directly, so they are deliberately NOT redefined here — the brand file already provides them. */ --paper-deep: var(--paper-inset); --ink-2: var(--ink-muted); --dim: var(--ink-faint); --rule: var(--hairline); --blue: var(--status-action); --amber: var(--status-alert); /* FILL ONLY, never text (1.94:1 on paper) */ /* ---------- Verdict colours ---------- */ --cal-action: var(--status-declined); --cal-declined: var(--status-declined); /* ---------- Surface + text ---------- */ --cal-paper: var(--paper); --cal-ink: var(--ink); --cal-bg: var(--paper); --cal-bg-raised: var(--paper-raised); --cal-bg-sunken: var(--paper-inset); --cal-fg: var(--ink); --cal-fg-muted: var(--ink-muted); --cal-fg-subtle: var(--ink-faint); --cal-border: var(--hairline); --cal-border-soft: var(--hairline); --cal-accent: var(--green); --cal-accent-hover: var(--green-deep); --cal-focus-ring: var(--focus); /* CHANGED: was --green. Brand §status defines the focus ring as the action blue, and cal-brand.css now supplies a global :focus-visible rule using it. */ --cal-approved: var(--status-approved); --cal-pending: var(--status-alert); /* ---------- Status washes ---------- Newly reachable. A surface may ONLY be tinted to carry a status. These are what make the amber rule followable: amber ground, --ink on top, never amber as text. */ --cal-wash-approved: var(--green-wash); --cal-wash-alert: var(--alert-wash); --cal-wash-action: var(--action-wash); --cal-wash-declined: var(--declined-wash); /* ---------- Fonts ---------- */ --cal-font-serif: var(--serif); --cal-font-sans: var(--sans); --cal-font-mono: var(--mono); /* ---------- Type scale ---------- The fixed 72/48/32 scale is retired. Brand's scale is 28/22/18 with a fluid display clamp, a density ratio of 1.87 rather than 3.0, which is what an information-dense professional tool wants. --cal-text-display is now responsive rather than a fixed 72px. */ --cal-text-display: var(--fs-display); /* was 72px → clamp(2rem,5.2vw,3.25rem) */ --cal-text-h1: var(--fs-h1); /* was 48px → 28px */ --cal-text-h2: var(--fs-h2); /* was 32px → 22px */ --cal-text-h3: var(--fs-h3); /* was 22px → 18px */ --cal-text-body: var(--fs-body); /* was 16px → 15px */ --cal-text-body-sm: var(--fs-label); /* was 14px → 13px */ --cal-text-caption: var(--fs-citation); /* was 12px → 12px, now the real citation token */ --cal-tracking-display: var(--ls-display); --cal-leading-display: var(--lh-display); /* the citation layer, newly reachable by name from every surface */ --cal-text-citation: var(--fs-citation); --cal-leading-citation: var(--lh-citation); /* ---------- Spacing (4px base, 1:1 with brand) ---------- */ --cal-space-1: var(--s1); --cal-space-2: var(--s2); --cal-space-3: var(--s3); --cal-space-4: var(--s4); --cal-space-5: var(--s5); --cal-space-6: var(--s6); --cal-space-7: var(--s7); --cal-space-8: var(--s8); --cal-space-9: var(--s9); --cal-space-10: var(--s10); /* ---------- Radius: SHARP. cal is rectangular. ---------- */ --cal-radius-sm: var(--r-sm); --cal-radius-md: var(--r-md); --cal-radius-lg: var(--r-lg); --cal-radius-full: var(--r-full); /* status dots and avatars only */ /* ---------- Shadows: none. Use hairlines. ---------- */ --cal-shadow-sm: var(--shadow-sm); --cal-shadow-md: var(--shadow-md); /* ---------- Motion ---------- */ --cal-transition-fast: var(--dur-fast) var(--ease); /* was 150ms ease → 100ms */ --cal-transition-base: var(--dur-base) var(--ease); /* 180ms, unchanged */ } /* ---------- Dark mode ---------- Almost nothing is needed here any more. Every --cal-* above points at a brand token, and cal-brand.css already flips those tokens for dark, so the aliases follow automatically. The old 25-line hardcoded dark block is gone. These two are the only genuine exceptions — tokens whose light and dark values map to DIFFERENT brand tokens rather than to one token that flips: --cal-accent-hover light wants --green-deep (#1B4332). That is near invisible on dark paper, so dark wants --green-strong. --cal-border-soft light wants the hairline; dark wanted #242422, which is --paper-raised in dark only. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cal-accent-hover: var(--green-strong); --cal-border-soft: var(--paper-raised); } } [data-theme="dark"] { --cal-accent-hover: var(--green-strong); --cal-border-soft: var(--paper-raised); }