/* ============================================
   VoxPulse Design Tokens (CSS Variables)
   ============================================ */

:root {
  /* Backgrounds */
  --bg-app: #fafafa;
  --bg-card: #ffffff;
  --bg-elevated: #f5f5f5;

  /* Text */
  --text-primary: #1a1a1a;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;

  /* Accent */
  --accent-primary: #7c3aed;
  --accent-primary-hover: #6d28d9;
  --accent-gold: #c9a86c;

  /* Pulse badges - dark gold like accent-gold */
  --pulse-badge-bg: #78350f;
  --pulse-badge-text: #fef3c7;

  /* Borders */
  --border-default: #e5e7eb;
  --border-strong: #d1d5db;

  /* Status */
  --status-success: #22c55e;
  --status-warning: #f59e0b;
  --status-error: #ef4444;
  --status-info: #3b82f6;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
  --shadow-mic: 0 4px 20px rgba(124,58,237,0.3);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Typography */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;

  /* Layout */
  --header-height: 64px;
  --bottom-nav-height: 64px;
  --mic-size-desktop: 64px;
  --mic-size-mobile: 72px;
  --mic-bottom-offset: 24px;
}

/* ============================================
   Dark Mode Token Overrides
   Uses :is() to combine [data-theme="dark"] and
   system preference for [data-theme="system"]
   ============================================ */

/* Explicit dark mode */
[data-theme="dark"] {
  --bg-app: #0a0a0b;
  --bg-card: #141416;
  --bg-elevated: #1f1f23;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --text-muted: #6b6b6b;
  --border-default: #2a2a2e;
  --border-strong: #3a3a3e;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
  /* Copper/Gold accent for dark mode */
  --accent-primary: #d4a574;
  --accent-primary-light: #e8c9a8;
  --accent-primary-glow: rgba(212, 165, 116, 0.15);
  --accent-primary-hover: #c99a69;
}

/* System preference dark mode */
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --bg-app: #0a0a0b;
    --bg-card: #141416;
    --bg-elevated: #1f1f23;
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --text-muted: #6b6b6b;
    --border-default: #2a2a2e;
    --border-strong: #3a3a3e;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
    /* Copper/Gold accent for dark mode */
    --accent-primary: #d4a574;
    --accent-primary-light: #e8c9a8;
    --accent-primary-glow: rgba(212, 165, 116, 0.15);
    --accent-primary-hover: #c99a69;
  }
}