:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-background: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-muted: #f1f5f9;
  --color-border: #e2e8f0;
  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-info: #0284c7;
}
.dark {
  --color-primary: #3b82f6;
  --color-primary-hover: #60a5fa;
  --color-background: #0f172a;
  --color-surface: #1e293b;
  --color-surface-muted: #334155;
  --color-border: #475569;
  --color-text: #f1f5f9;
  --color-text-muted: #94a3b8;
}
/* Skeleton shimmer animation */
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.skeleton { background: linear-gradient(90deg, var(--color-surface-muted) 25%, var(--color-border) 50%, var(--color-surface-muted) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; }
/* Recording pulse */
@keyframes pulse-rec { 0%,100%{opacity:1} 50%{opacity:0.4} }
.recording-pulse { animation: pulse-rec 1.2s ease-in-out infinite; }