/* ============================================================
   variables.css — Design Tokens
   Live Talk AI Framework v2
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap');

:root {
  /* Colors */
  --bg:       #080c14;
  --surface:  #0f1624;
  --surface2: #151d2e;
  --accent:   #00f5c4;
  --accent2:  #7c3aed;
  --accent3:  #0ea5e9;
  --text:     #e2e8f0;
  --muted:    #64748b;
  --danger:   #ef4444;
  --warning:  #f59e0b;
  --success:  #10b981;

  /* Fonts */
  --font-display: 'Syne', sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* Spacing */
  --gap-xs:  4px;
  --gap-sm:  8px;
  --gap-md:  12px;
  --gap-lg:  20px;
  --gap-xl:  32px;

  /* Radius */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* Shadows / Glows */
  --glow-accent:  0 0 30px rgba(0, 245, 196, 0.3);
  --glow-accent2: 0 0 30px rgba(124, 58, 237, 0.3);
  --glow-danger:  0 0 30px rgba(239, 68, 68, 0.4);

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* Z-index layers */
  --z-base:    1;
  --z-overlay: 10;
  --z-toast:   999;
}