:root {
  /* Tektos Dark Theme Palette */
  --bg-canvas: #070a12;
  --bg-surface: #0f172a;
  --bg-surface-elevated: #1e293b;
  --bg-surface-hover: #27354f;

  --border-subtle: #1e293b;
  --border-base: #334155;
  --border-focus: #64748b;

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #0f172a;

  /* Purpose-Based Accent Colors */
  --tektos-gold: #d4af37;
  --tektos-gold-hover: #b89726;
  --tektos-gold-glow: rgba(212, 175, 55, 0.2);

  --template-teal: #14b8a6;
  --template-teal-hover: #0d9488;
  --template-teal-dim: rgba(20, 184, 166, 0.15);

  --editing-blue: #3b82f6;
  --editing-blue-hover: #2563eb;
  --editing-blue-dim: rgba(59, 130, 246, 0.15);

  --audio-amber: #f59e0b;
  --audio-amber-hover: #d97706;
  --audio-amber-dim: rgba(245, 158, 11, 0.15);

  --macro-red: #ef4444;
  --macro-red-dim: rgba(239, 68, 68, 0.15);

  --ready-green: #22c55e;
  --ready-green-dim: rgba(34, 197, 94, 0.15);

  /* Layout & Sizing */
  --max-width: 1200px;
  --header-height: 72px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4);
  --transition-fast: 0.15s ease;
}