/*
* Xablu.Blazor — FigmaMake bridge token layer (v3.58.0).
*
* OPT-IN compatibility shim that aliases the unprefixed CSS custom property
* names used in consumer FigmaMake exports (e.g. `var(--foreground)`) to the
* canonical `--x-*` tokens defined in `tokens.css`. Lets consumers paste
* FigmaMake `style={{ ... }}` blocks directly into `.razor` without
* per-property rename.
*
* Usage (opt-in):
*
*
*
* The aliases ride a dedicated stylesheet so the global namespace stays
* unprefixed-free for consumers who prefer strict `--x-` discipline. Drop
* the `` and the bridge disappears — zero runtime cost when not opted in.
*
* Coverage policy
* ===============
*
* Aliases included:
* - High-frequency unprefixed names (>= 30 refs across the 4-consumer
* FigmaMake sweep: GoToM8, GreenRouter, Bottler, CodeChat).
* - With a direct `--x-*` equivalent in `tokens.css`.
*
* Aliases EXCLUDED (out of scope for this bridge — belong in per-consumer
* theme overrides, not in shared infra):
* - Brand-specific gradients (`--gradient-brand-foreground`,
* `--brand-purple-500`).
* - Consumer-specific alert styling (`--alert-info-bg`, `--alert-warning-border`).
* - Grey-scale aliases (`--grey-50`, `--grey-100`) — Xablu uses semantic
* `--x-color-muted-*` instead.
* - `--success-dark` / `--info-dark` etc. — non-canonical naming
* (Xablu uses numeric scale `-700` / `-800` for darker tones).
*
* Architecture invariant `V358BridgeAliasArchitectureTests` pins every alias
* in this file to an existing `--x-*` token name in `tokens.css` so a future
* minor cannot let aliases drift.
*
* Token frequencies (from the v3.58.0 4-consumer FigmaMake sweep) are noted
* in trailing comments; they reflect snapshot data and are NOT enforced —
* the architecture-test only checks that each alias's RHS resolves.
*/
:root {
/* ─── Color (top color tokens by FigmaMake reference frequency) ─── */
--foreground: var(--x-color-foreground); /* 1681 refs */
--muted-foreground: var(--x-color-muted-foreground); /* 2337 refs */
--muted: var(--x-color-muted); /* 236 refs */
--background: var(--x-color-background); /* 54 refs */
--card: var(--x-color-card); /* 594 refs */
--primary: var(--x-color-primary); /* 175 refs */
--primary-foreground: var(--x-color-primary-foreground); /* 77 refs */
--primary-50: var(--x-color-primary-50); /* 87 refs */
--primary-100: var(--x-color-primary-100); /* 35 refs */
--primary-200: var(--x-color-primary-200); /* 56 refs */
--primary-300: var(--x-color-primary-300); /* v3.72.0 — state-tier ramp completion */
--primary-400: var(--x-color-primary-400); /* v3.72.0 — state-tier ramp completion */
--primary-500: var(--x-color-primary-500); /* v3.72.0 — state-tier ramp completion */
--primary-600: var(--x-color-primary-600); /* 325 refs */
--primary-700: var(--x-color-primary-700); /* 162 refs */
--primary-800: var(--x-color-primary-800); /* v3.72.0 — state-tier ramp completion */
--primary-900: var(--x-color-primary-900); /* v3.72.0 — state-tier ramp completion */
--success: var(--x-color-success); /* 433 refs */
--success-muted: var(--x-color-success-muted); /* 48 refs */
--success-50: var(--x-color-success-50); /* v3.72.0 — state-tier ramp completion */
--success-100: var(--x-color-success-100); /* v3.72.0 — state-tier ramp completion */
--success-200: var(--x-color-success-200); /* v3.72.0 — state-tier ramp completion */
--success-500: var(--x-color-success-500); /* v3.72.0 — state-tier ramp completion */
--success-600: var(--x-color-success-600); /* 108 refs */
--success-700: var(--x-color-success-700); /* 65 refs */
--warning: var(--x-color-warning); /* 228 refs */
--warning-50: var(--x-color-warning-50); /* 33 refs */
--warning-100: var(--x-color-warning-100); /* v3.72.0 — state-tier ramp completion */
--warning-200: var(--x-color-warning-200); /* v3.72.0 — state-tier ramp completion */
--warning-500: var(--x-color-warning-500); /* v3.72.0 — state-tier ramp completion */
--warning-600: var(--x-color-warning-600); /* 50 refs */
--warning-700: var(--x-color-warning-700); /* 61 refs */
--info: var(--x-color-info); /* 179 refs */
--info-muted: var(--x-color-info-muted); /* 39 refs */
--info-50: var(--x-color-info-50); /* 33 refs */
--info-100: var(--x-color-info-100); /* v3.72.0 — state-tier ramp completion */
--info-200: var(--x-color-info-200); /* v3.72.0 — state-tier ramp completion */
--info-500: var(--x-color-info-500); /* v3.72.0 — state-tier ramp completion */
--info-600: var(--x-color-info-600); /* 38 refs */
--info-700: var(--x-color-info-700); /* 63 refs */
--destructive: var(--x-color-destructive); /* 266 refs */
--destructive-50: var(--x-color-destructive-50); /* v3.72.0 — state-tier ramp completion */
--destructive-100: var(--x-color-destructive-100); /* v3.72.0 — state-tier ramp completion */
--destructive-200: var(--x-color-destructive-200); /* v3.72.0 — state-tier ramp completion */
--destructive-500: var(--x-color-destructive-500); /* v3.72.0 — state-tier ramp completion */
--destructive-600: var(--x-color-destructive-600); /* v3.72.0 — state-tier ramp completion */
--destructive-700: var(--x-color-destructive-700); /* v3.72.0 — state-tier ramp completion */
--input-background: var(--x-color-input-background); /* 74 refs */
--sidebar-accent-foreground: var(--x-color-sidebar-accent-foreground); /* 36 refs */
--secondary-700: var(--x-color-secondary-700); /* v3.81.0 phase G (#92) — closes GoToM8 hand-rolled alias; was in Phase 141 KEEP bucket because upstream coverage was unclear */
/* ─── Elevation (v3.81.0 phase G — #92) — token shorthands for FigmaMake
box-shadow exports. Mirrors v3.70.0 expansion pattern: high-frequency
consumer-side aliases the bridge layer should own, not consumer-side
overrides. ─── */
--elevation-sm: var(--x-elevation-sm); /* v3.81.0 phase G (#92) */
--elevation-md: var(--x-elevation-md); /* v3.81.0 phase G (#92) */
--elevation-lg: var(--x-elevation-lg); /* v3.81.0 phase G (#92) */
--elevation-xl: var(--x-elevation-xl); /* v3.81.0 phase G (#92) */
/* ─── Border (semantic border tokens) ─── */
--border: var(--x-color-border); /* 1192 refs */
--border-subtle: var(--x-color-border-subtle); /* 244 refs */
/* ─── Typography — text size scale ─── */
--text-2xs: var(--x-text-2xs); /* 449 refs */
--text-3xs: var(--x-text-3xs); /* 172 refs */
--text-xxs: var(--x-text-xxs); /* 33 refs */
--text-xs: var(--x-text-xs); /* 2915 refs */
--text-sm: var(--x-text-sm); /* 2796 refs */
--text-base: var(--x-text-base); /* 155 refs */
--text-lg: var(--x-text-lg); /* 233 refs */
--text-xl: var(--x-text-xl); /* 175 refs */
--text-2xl: var(--x-text-2xl); /* 272 refs */
--text-3xl: var(--x-text-3xl); /* 31 refs */
/* ─── Typography — font families + weights ─── */
--font-sans: var(--x-font-body); /* 947 refs */
--font-family-base: var(--x-font-body); /* 317 refs */
--font-mono: var(--x-font-mono); /* 570 refs */
--font-family-mono: var(--x-font-family-mono); /* 144 refs */
--font-display: var(--x-font-display); /* 117 refs */
--font-weight-normal: var(--x-font-weight-normal); /* 156 refs */
--font-weight-medium: var(--x-font-weight-medium); /* 3167 refs */
--font-weight-semibold: var(--x-font-weight-semibold); /* 200 refs */
--font-weight-bold: var(--x-font-weight-bold); /* 336 refs */
/* ─── Spacing — 4px-based scale ─── */
--spacing-0-5: var(--x-spacing-0-5); /* 232 refs */
--spacing-1: var(--x-spacing-1); /* 498 refs */
--spacing-1-5: var(--x-spacing-1-5); /* 286 refs */
--spacing-2: var(--x-spacing-2); /* 715 refs */
--spacing-2-5: var(--x-spacing-2-5); /* 85 refs */
--spacing-3: var(--x-spacing-3); /* 513 refs */
--spacing-4: var(--x-spacing-4); /* 339 refs */
--spacing-5: var(--x-spacing-5); /* 58 refs */
--spacing-6: var(--x-spacing-6); /* 72 refs */
--spacing-px: var(--x-spacing-px); /* 66 refs */
--spacing-card-padding: var(--x-spacing-card-padding); /* 169 refs */
--spacing-card-gap: var(--x-spacing-card-gap); /* 90 refs */
--spacing-section: var(--x-spacing-section); /* 40 refs */
/* ─── Radius ─── */
--radius: var(--x-radius-md); /* 299 refs (FigmaMake default = 6px = --x-radius-md) */
--radius-sm: var(--x-radius-sm); /* 195 refs */
--radius-md: var(--x-radius-md); /* 144 refs */
--radius-lg: var(--x-radius-lg); /* 140 refs */
--radius-xl: var(--x-radius-xl); /* 68 refs */
--radius-full: var(--x-radius-full); /* 183 refs */
--radius-card: var(--x-radius-card); /* 306 refs */
--radius-button: var(--x-radius-button); /* 140 refs */
/* ─── Motion (composed shorthands — Phase 184 retired the parallel `--x-transition-*` family in favour of `--x-duration-*` + `--x-ease-*`; this bridge layer composes the FigmaMake shorthand at the unprefixed name only). ─── */
--transition-fast: var(--x-duration-fast) var(--x-ease-out); /* 68 refs (150ms ease-out) */
--transition-base: var(--x-duration-normal) var(--x-ease-out); /* 5 refs (200ms ease-out) */
--transition-slow: var(--x-duration-slow) var(--x-ease-out); /* 1 ref (300ms ease-out) */
/* ═══ v3.70.0 expansion (per token-usage analysis 2026-05-09) ═══════════
The token-usage analysis surveyed 305 distinct tokens across 7 consumer
FigmaMake trees. The unbridged shadcn theme-extension cluster is used
in ALL 7 consumers (~360 sidebar refs alone). Bridging now closes the
systemic gap. */
/* ─── Sidebar family (all 7 consumers; ~360 combined refs) ─── */
--sidebar: var(--x-color-sidebar);
--sidebar-foreground: var(--x-color-sidebar-foreground);
--sidebar-primary: var(--x-color-sidebar-primary);
--sidebar-primary-foreground: var(--x-color-sidebar-primary-foreground);
--sidebar-accent: var(--x-color-sidebar-accent);
/* sidebar-accent-foreground already declared above (color block) — skipped here */
--sidebar-border: var(--x-color-sidebar-border);
--sidebar-ring: var(--x-color-sidebar-ring);
/* ─── Popover family (all 7 consumers) — uses card tokens since popover-* are
not in the canonical Xablu palette today. Consumers can override per-theme. ─── */
--popover: var(--x-color-card);
--popover-foreground: var(--x-color-card-foreground);
/* ─── Accent family (all 7 consumers) — uses muted/foreground tokens since
--x-color-accent-* are not canonical. Consumer themes can override. ─── */
--accent: var(--x-color-muted);
--accent-foreground: var(--x-color-foreground);
/* ─── Secondary-foreground / destructive-foreground / card-foreground / input ─── */
--secondary-foreground: var(--x-color-foreground);
--destructive-foreground: var(--x-color-destructive-foreground);
--card-foreground: var(--x-color-card-foreground);
--input: var(--x-color-border);
/* ─── Chart palette (all 7 consumers) ─── */
--chart-1: var(--x-color-chart-1);
--chart-2: var(--x-color-chart-2);
--chart-3: var(--x-color-chart-3);
--chart-4: var(--x-color-chart-4);
--chart-5: var(--x-color-chart-5);
/* ─── Line-height tier (codechat: 221 refs) ─── */
--line-height-tight: var(--x-line-height-tight);
--line-height-normal: var(--x-line-height-normal);
--line-height-relaxed: var(--x-line-height-relaxed);
/* ═══ v3.71.0 expansion — Alert family (closes #60 fully) ═══════════════
Per token-usage analysis: GreenRouter uses --alert-info-bg/border etc.
(8 tokens, 700+ refs). Pre-v3.71.0 the bridge file's stated policy
excluded "consumer-specific alert styling" — but the pattern recurs
universally now. Bridge to existing canonical muted/foreground tokens. */
--alert-info-bg: var(--x-color-info-muted);
--alert-info-border: var(--x-color-info);
--alert-success-bg: var(--x-color-success-muted);
--alert-success-border: var(--x-color-success);
--alert-warning-bg: var(--x-color-warning-muted);
--alert-warning-border: var(--x-color-warning);
--alert-error-bg: var(--x-color-destructive-muted);
--alert-error-border: var(--x-color-destructive);
}