/* ═══ TETA DESIGN TOKENS ═══ */
/* Extracted from teta-design-system.html */

:root {
  /* Background layers */
  --bg-void: #060610;
  --bg-deep: #080812;
  --bg-surface: #0a0a16;
  --bg-card: #0e0e1a;
  --bg-elevated: #12121f;
  --bg-input: #0c0c18;

  /* Primary - Indigo Theta */
  --theta-50: rgba(130, 140, 255, 0.06);
  --theta-100: rgba(130, 140, 255, 0.10);
  --theta-200: rgba(130, 140, 255, 0.18);
  --theta-300: #4a4fc7;
  --theta-400: #6366f1;
  --theta-500: #818cf8;
  --theta-600: #a5b4fc;
  --theta-glow: rgba(99, 102, 241, 0.08);
  --theta-glow-strong: rgba(99, 102, 241, 0.15);

  /* Text hierarchy */
  --text-primary: rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.55);
  --text-tertiary: rgba(255, 255, 255, 0.30);
  --text-ghost: rgba(255, 255, 255, 0.14);

  /* Feedback */
  --correct: #34d399;
  --correct-glow: rgba(52, 211, 153, 0.12);
  --correct-bg: rgba(52, 211, 153, 0.06);
  --error: #f87171;
  --error-glow: rgba(248, 113, 113, 0.12);
  --error-bg: rgba(248, 113, 113, 0.06);

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-light: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.12);

  /* Typography */
  --font-main: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}