/* Paravoice design tokens — dark-first (Midnight Violet) */
:root {
  /* Surfaces */
  --bg-0: #06060A;
  --bg-1: #0A0A12;
  --bg-2: #12121C;
  --bg-3: #1A1A26;
  --glass-fill: rgba(255, 255, 255, 0.04);
  --glass-stroke: rgba(255, 255, 255, 0.06);
  --glass-stroke-strong: rgba(255, 255, 255, 0.10);

  /* Brand */
  --violet-500: #8B5CF6;
  --violet-400: #A78BFA;
  --violet-300: #C4B5FD;
  --magenta-500: #EC4899;
  --magenta-400: #F472B6;
  --brand-gradient: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
  --brand-glow: 0 0 40px rgba(139, 92, 246, 0.45), 0 0 80px rgba(236, 72, 153, 0.25);

  /* State */
  --live-green: #34D399;
  --amber: #F59E0B;
  --red-500: #EF4444;
  --cyan-400: #22D3EE;

  /* Text (on dark) */
  --text-hi: rgba(255, 255, 255, 0.95);
  --text-mid: rgba(255, 255, 255, 0.70);
  --text-lo: rgba(255, 255, 255, 0.45);
  --text-disabled: rgba(255, 255, 255, 0.25);

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 9999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.50);
  --shadow-glow: var(--brand-glow);
}

/* Light mode (landing page only) */
:root[data-theme="light"] {
  --bg-0: #FAFAF9;
  --bg-1: #FFFFFF;
  --bg-2: #F5F5F4;
  --bg-3: #E7E5E4;
  --glass-fill: rgba(255, 255, 255, 0.70);
  --glass-stroke: rgba(0, 0, 0, 0.06);
  --text-hi: rgba(17, 17, 17, 0.95);
  --text-mid: rgba(17, 17, 17, 0.70);
  --text-lo: rgba(17, 17, 17, 0.45);
}