:root {
  /* Surface & Canvas System */
  --um-color-bg-base: #060813;
  --um-color-bg-surface: #0B0E1E;
  --um-color-bg-card: rgba(16, 21, 44, 0.75);
  --um-color-bg-card-hover: rgba(22, 28, 58, 0.9);
  --um-color-bg-glass: rgba(255, 255, 255, 0.035);
  
  /* Borders & Overlays */
  --um-border-subtle: rgba(255, 255, 255, 0.08);
  --um-border-strong: rgba(255, 255, 255, 0.16);
  --um-border-active: rgba(255, 0, 160, 0.45);
  --um-border-glow: rgba(0, 240, 255, 0.4);
  
  /* Brand Spectrum */
  --um-color-magenta: #FF00A0;
  --um-color-magenta-hover: #E60090;
  --um-color-magenta-glow: rgba(255, 0, 160, 0.35);
  --um-color-violet: #7000FF;
  --um-color-blue: #00F0FF;
  --um-color-cyan: #00E5FF;
  --um-color-success: #00E676;
  
  /* High-Contrast Typography Tokens (WCAG 2.2 AA / AAA Compliant) */
  --um-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --um-text-heading: #FFFFFF;
  --um-text-body: #E2E8F0;
  --um-text-muted: #94A3B8;
  --um-text-dim: #64748B;
  
  /* Spectral Gradients */
  --um-grad-primary: linear-gradient(135deg, #FF00A0 0%, #7000FF 100%);
  --um-grad-spectral: linear-gradient(120deg, #FF00A0 0%, #7000FF 45%, #00F0FF 100%);
  --um-grad-card: linear-gradient(160deg, rgba(20, 26, 56, 0.85) 0%, rgba(9, 12, 28, 0.98) 100%);
  --um-grad-badge: linear-gradient(90deg, #FF00A0 0%, #A800FF 100%);
  
  /* Elevation & Radii */
  --um-radius-sm: 8px;
  --um-radius-md: 12px;
  --um-radius-lg: 18px;
  --um-radius-xl: 24px;
  --um-radius-full: 9999px;
  --um-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45);
  --um-shadow-glow: 0 0 25px rgba(255, 0, 160, 0.25);
}