/**
 * businesscalc-design-system tokens.css
 * Locked single source of truth design tokens.
 * WCAG AA compliant dark slate + emerald palette.
 */
:root {
  /* Surfaces — 4-step dark ladder */
  --canvas: #0A0F1A;
  --surface-1: #111827;
  --surface-2: #172032;
  --surface-3: #1E293B;
  --hairline: #1F2A3C;
  --hairline-strong: #2C3A52;

  /* Text — Light slate palette */
  --ink: #E6EDF5;
  --ink-muted: #94A3B8;
  --ink-subtle: #64748B;

  /* Accent — Emerald */
  --accent: #10B981;
  --accent-hover: #34D399;
  --accent-pressed: #059669;
  --accent-ink: #6EE7B7;
  --accent-soft: rgba(16, 185, 129, 0.12);
  --on-accent: #04140D;

  /* Semantic Data Colors */
  --positive: #34D399;
  --negative: #F87171;
  --warning: #FBBF24;

  /* Typography */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* Spacing (8px grid base) */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-huge: 64px;

  /* Elevation & Depth */
  --shadow-l2: 0 8px 24px rgba(0, 0, 0, 0.40);
  --glass-bg: rgba(23, 32, 50, 0.92);
  --glass-border: 1px solid var(--hairline-strong);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.40);
  --result-glow: 0 0 0 1px var(--accent-soft), 0 8px 32px rgba(16, 185, 129, 0.10);
  --focus-ring: 0 0 0 3px var(--accent-soft);
}