/* Beacon → ATO design-system alias layer. Beacon's historical variable names remapped onto the canonical --ds-* tokens in ds-tokens.css, so existing rules keep working while the values come from the design system. Rules: - Never put a raw colour literal in a Beacon stylesheet. Alias a token. - Load order on every page: ds-tokens.css → ds-alias.css → page styles. - Light mode only. No dark variants. Spec: ato-hq/playbook 03-react-frontend/design-system.md */ :root { /* Surfaces. --bg-deepest was #ffffff; the spec bans pure white, so the lightest surface is now --ds-surface-raised (#FEFEFD). */ --bg: var(--ds-canvas); --bg-raised: var(--ds-surface); --bg-surface: var(--ds-surface-sunken); --bg-hover: var(--ds-border); --bg-deepest: var(--ds-surface-raised); /* Accent. Split per spec: brand Teal #007E84 is a FILL colour only (it sits exactly on the 4.5:1 floor); all teal text, links and primary actions use deep lagoon #015F66. Use --accent-fill for chart/bar fills, --accent for anything that is text or a control surface. */ --accent: var(--ds-primary); --accent-hover: var(--ds-primary-hover); --accent-muted: var(--ds-primary-subtle); --accent-subtle:var(--ds-charcoal-50); --accent-dark: var(--ds-primary-active); --accent-fill: var(--ds-teal-600); /* Text. Beacon had a 4-tier hierarchy; the design system publishes only three AA-passing text colours on canvas (15.6 / 6.89 / 4.83), so the fourth tier collapses onto --ds-text-subtle. --text-faint was previously used for visible labels, hints and card headings at 2.56:1 — a real AA failure. Genuinely-disabled controls use --text-disabled instead. */ --text: var(--ds-text); --text-secondary: var(--ds-text-muted); --text-muted: var(--ds-text-subtle); --text-faint: var(--ds-text-subtle); --text-disabled: var(--ds-text-disabled); --text-on-brand: var(--ds-text-on-brand); /* Borders */ --border: var(--ds-border); --border-subtle:var(--ds-border-subtle); --border-strong:var(--ds-border-strong); --border-focus: var(--ds-primary-border); /* Status — events that happened. Beacon historically used brand teal as "ok"; the spec reserves teal for fills and defines success as green, so status text/chips are now green and teal survives in the bands. THE SURFACE RULE (spec §Accessibility, adopted from this implementation). Status colours are bare text on canvas and surface only. On --bg-surface (sunken) or any hover fill, a status colour takes its own subtle tint — it becomes a chip. Status-on-its-own-subtle all pass: warn 4.54, success 4.71, danger 5.58, info 5.41. Hoverable-row hover fills are never darker than --ds-surface-sunken. Note: text tokens no longer need a per-surface substitution. --ds-text-subtle was darkened to #596A6D in spec 032da96 and now clears AA on every system surface (5.28 canvas / 5.61 surface / 4.91 sunken). */ --status-ok: var(--ds-success); --status-ok-muted: var(--ds-success-subtle); --status-warn: var(--ds-warning); --status-warn-muted: var(--ds-warning-subtle); --status-danger: var(--ds-danger); --status-danger-muted:var(--ds-danger-subtle); --status-info: var(--ds-info); --status-info-muted: var(--ds-info-subtle); /* Score bands — standing state (health scores), not events. <60 At risk · 60-79 Watch · 80+ Healthy. */ --band-high: var(--ds-band-high); --band-high-subtle: var(--ds-band-high-subtle); --band-mid: var(--ds-band-mid); --band-mid-subtle: var(--ds-band-mid-subtle); --band-low: var(--ds-band-low); --band-low-subtle: var(--ds-band-low-subtle); --band-none: var(--ds-band-none); /* Tier badges. Identity, not status — a Grow client is not "good" and an Essential client is not "warning". Now on the system's categorical accents (added in spec 032da96 in response to this implementation); the Beacon-local blue/purple they replaced are gone. */ --tier-grow-bg: var(--ds-cat-blue-subtle); --tier-grow-text: var(--ds-cat-blue); --tier-essential-bg: var(--ds-cat-purple-subtle); --tier-essential-text:var(--ds-cat-purple); /* Ad-funnel data sources. Also identity, not status: Meta takes the brand accent, GHL the categorical purple. Replaces a local oklch indigo. */ --source-meta: var(--ds-primary); --source-meta-subtle: var(--ds-primary-subtle); --source-ghl: var(--ds-cat-purple); --source-ghl-subtle: var(--ds-cat-purple-subtle); /* Provider brand marks — DECORATIVE USE ONLY (the .brand-dot beside a provider's printed name on the pricing page). The name carries the meaning there, so the dot conveys nothing on its own. They are NOT used as chart series fills. The spec's escape hatch for identity-bearing series requires every fill to clear 3:1 against the chart surface, and two of three fail: Claude #D97757 is 3.09 on surface but 2.91 on canvas; Apify #00B96B is 2.40 everywhere. Only GHL #2F7DE1 (4.04) passes. Darkening them to qualify would stop them being the brand colour, which was the whole point — so the provider split keeps the standard categorical ramp. Never as text. */ --brand-claude: #D97757; --brand-apify: #00B96B; --brand-ghl: #2F7DE1; /* Typography */ --font-ui: var(--ds-font-sans); --font-mono: var(--ds-font-mono); /* Radius. Cards move to --ds-radius-lg (16px) per "soft cards"; controls are pills, inputs stay rectangular at --ds-radius-md. */ --radius-sm: var(--ds-radius-xs); --radius: var(--ds-radius-sm); --radius-md: var(--ds-radius-md); --radius-lg: var(--ds-radius-md); --radius-xl: var(--ds-radius-lg); --radius-card: var(--ds-radius-lg); --radius-pill: var(--ds-radius-pill); --radius-control:var(--ds-radius-control); /* Shadows — charcoal-tinted, never black. */ --shadow-card: var(--ds-shadow-md); --shadow-modal: var(--ds-shadow-xl); --shadow-menu: var(--ds-shadow-lg); --shadow-drawer:var(--ds-shadow-xl); --shadow-focus: var(--ds-focus-ring); /* Animation */ --ease: var(--ds-ease-entrance); --duration: 0.6s; --stagger: 80ms; }