/**
 * Shape and depth. The radius ladder exists for API parity with other systems but is
 * deliberately compressed: this language is square, 2px is the practical maximum.
 * Elevation is GLOW, not shadow - each step ships a shadow and the surface it pairs with.
 */
:root {
  --radius-none: 0px;
  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 3px;
  --radius-full: 999px;
  --radius-chip: var(--radius-md);

  --border-width-hair: 1px;
  --border-width-thick: 2px;
  --border-style-solid: solid; /* @kind other */
  --border-style-dashed: dashed; /* @kind other */ /* reserved for drop targets only */
  --border-hair: var(--border-width-hair);
  --border-thick: var(--border-width-thick);

  --elevation-0-shadow: none; /* @kind shadow */
  --elevation-0-bg: var(--bg-canvas); /* @kind color */
  --elevation-1-shadow: 0 0 6px rgba(95, 227, 245, 0.35); /* @kind shadow */
  --elevation-1-bg: var(--bg-sunken); /* @kind color */
  --elevation-2-shadow: 0 0 12px rgba(95, 227, 245, 0.45), inset 0 0 12px rgba(95, 227, 245, 0.1); /* @kind shadow */
  --elevation-2-bg: var(--bg-surface); /* @kind color */
  --elevation-3-shadow: 0 0 18px rgba(95, 227, 245, 0.48), inset 0 0 16px rgba(95, 227, 245, 0.12); /* @kind shadow */
  --elevation-3-bg: var(--bg-surface); /* @kind color */
  --elevation-4-shadow: 0 0 24px rgba(95, 227, 245, 0.5), inset 0 0 20px rgba(95, 227, 245, 0.14); /* @kind shadow */
  --elevation-4-bg: var(--bg-surface-raised); /* @kind color */
  --elevation-5-shadow: 0 0 36px rgba(95, 227, 245, 0.55), inset 0 0 24px rgba(95, 227, 245, 0.16); /* @kind shadow */
  --elevation-5-bg: var(--bg-surface-raised); /* @kind color */

  --glow-sm: var(--elevation-1-shadow); /* @kind shadow */
  --glow-md: var(--elevation-2-shadow); /* @kind shadow */
  --glow-lg: var(--elevation-4-shadow); /* @kind shadow */
  --glow-success: 0 0 12px rgba(62, 214, 127, 0.45); /* @kind shadow */
  --glow-danger: 0 0 12px rgba(244, 99, 95, 0.45); /* @kind shadow */
  --glow-confirm: var(--glow-success); /* @kind shadow */
  --glow-fault: var(--glow-danger); /* @kind shadow */

  --text-glow: 0 0 8px rgba(143, 246, 255, 0.55); /* @kind shadow */
  --text-glow-strong: 0 0 4px rgba(214, 254, 255, 0.9), 0 0 16px rgba(95, 227, 245, 0.7); /* @kind shadow */

  /* focus ring - one token, every interactive element */
  --ring-width: 1px; /* @kind other */
  --ring-offset: 2px; /* @kind other */
  --ring-color: var(--state-focus-ring);
  --ring-shadow: 0 0 0 var(--ring-width) var(--ring-color), var(--glow-sm); /* @kind shadow */

  --blur-none: blur(0); /* @kind other */
  --blur-glass: blur(2px); /* @kind other */
  --blur-heavy: blur(8px); /* @kind other */

  --opacity-0: 0; /* @kind other */
  --opacity-5: 0.05; /* @kind other */
  --opacity-10: 0.1; /* @kind other */
  --opacity-20: 0.2; /* @kind other */
  --opacity-35: 0.35; /* @kind other */
  --opacity-50: 0.5; /* @kind other */
  --opacity-65: 0.65; /* @kind other */
  --opacity-80: 0.8; /* @kind other */
  --opacity-100: 1; /* @kind other */
}