/* ParaScreen design tokens — dark-first (Midnight Teal) */
:root {
  /* Surfaces */
  --bg-0: #05080B;
  --bg-1: #08101A;
  --bg-2: #0E1A26;
  --bg-3: #142635;
  --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 — teal / cyan — mirrors ParaScreen's app accent */
  --teal-500: #14B8A6;
  --teal-400: #2DD4BF;
  --teal-300: #5EEAD4;
  --cyan-500: #06B6D4;
  --cyan-400: #22D3EE;
  --cyan-300: #67E8F9;
  --brand-gradient: linear-gradient(135deg, #14B8A6 0%, #22D3EE 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(20,184,166,0.85) 0%, rgba(34,211,238,0.85) 100%);
  --brand-glow: 0 0 40px rgba(20, 184, 166, 0.45), 0 0 80px rgba(34, 211, 238, 0.25);

  /* State */
  --live-green: #34D399;
  --amber: #F59E0B;
  --red-500: #EF4444;
  --violet-400: #A78BFA;

  /* 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);

  /* Typography */
  --font-heading: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Motion */
  --dur-micro: 120ms;
  --dur-fast: 240ms;
  --dur-med: 400ms;
  --dur-slow: 640ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
}

/* 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);
}

/* ParaScreen-specific gradient helpers */
.ambient-teal::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 15% 0%, rgba(20,184,166,0.22), transparent 60%),
    radial-gradient(50% 40% at 90% 100%, rgba(34,211,238,0.14), transparent 60%);
  z-index: 0;
}

/* Shared motion class — mirrors Paravoice */
.ambient-violet::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 15% 0%, rgba(20,184,166,0.22), transparent 60%),
    radial-gradient(50% 40% at 90% 100%, rgba(34,211,238,0.14), transparent 60%);
  z-index: 0;
}