/* Design tokens: High-contrast Dark Pro Studio theme */
:root {
  /* Surfaces */
  --bg: #090d16;
  --bg-subtle: #0f172a;
  --card: rgba(18, 25, 42, 0.88);
  --card-2: #1e293b;
  --card-hover: rgba(30, 41, 62, 0.95);
  --line: rgba(255, 255, 255, 0.16);
  --line-soft: rgba(255, 255, 255, 0.09);

  /* Typography - ULTRA HIGH CONTRAST (Pure white & bright slate) */
  --text: #ffffff;
  --text-2: #f8fafc;
  --muted: #e2e8f0;
  --dim: #cbd5e1;

  /* Status Colors */
  --green: #10b981;
  --green-soft: rgba(16, 185, 129, 0.2);
  --red: #f43f5e;
  --red-soft: rgba(244, 63, 94, 0.2);
  --amber: #fbbf24;
  --amber-soft: rgba(251, 191, 36, 0.2);
  --blue: #38bdf8;
  --blue-soft: rgba(56, 189, 248, 0.2);
  --purple: #c084fc;
  --purple-soft: rgba(192, 132, 252, 0.2);

  /* Brand Accents */
  --brand: #6366f1;
  --brand-dark: #4f46e5;
  --brand-soft: rgba(99, 102, 241, 0.25);
  --brand-tint: rgba(99, 102, 241, 0.12);
  --brand-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  --brand-grad-hover: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%);
  --brand-glow: 0 4px 20px -2px rgba(99, 102, 241, 0.55);

  /* Radii */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* Depth */
  --shadow-1: 0 2px 5px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 12px 30px -6px rgba(0, 0, 0, 0.65);
  --shadow-3: 0 25px 60px -12px rgba(0, 0, 0, 0.85);
  --ring: 0 0 0 3px rgba(99, 102, 241, 0.45);

  /* Controls */
  --ctl: 42px;
  --ctl-sm: 34px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t: 0.16s;
}

/* Light Theme Tokens: Crisp White Background & Slate Typography */
:root[data-theme="light"],
[data-theme="light"] {
  /* Surfaces - Pure White Background */
  --bg: #ffffff;
  --bg-subtle: #f8fafc;
  --card: #ffffff;
  --card-2: #f1f5f9;
  --card-hover: #f8fafc;
  --line: #e2e8f0;
  --line-soft: #f1f5f9;

  /* Typography - Crisp high-contrast dark slate */
  --text: #0f172a;
  --text-2: #1e293b;
  --muted: #475569;
  --dim: #64748b;

  /* Status Colors */
  --green: #059669;
  --green-soft: rgba(16, 185, 129, 0.14);
  --red: #e11d48;
  --red-soft: rgba(244, 63, 94, 0.14);
  --amber: #d97706;
  --amber-soft: rgba(217, 119, 6, 0.14);
  --blue: #0284c7;
  --blue-soft: rgba(2, 132, 199, 0.14);
  --purple: #9333ea;
  --purple-soft: rgba(147, 51, 234, 0.14);

  /* Brand Accents */
  --brand: #6366f1;
  --brand-dark: #4f46e5;
  --brand-soft: rgba(99, 102, 241, 0.12);
  --brand-tint: rgba(99, 102, 241, 0.06);
  --brand-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  --brand-grad-hover: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%);
  --brand-glow: 0 4px 18px -2px rgba(99, 102, 241, 0.35);

  /* Depth for light mode */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 4px 16px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
  --shadow-3: 0 20px 40px -8px rgba(0, 0, 0, 0.12);
  --ring: 0 0 0 3px rgba(99, 102, 241, 0.28);
}