/* CSS Variables - Color Scheme from Desktop App */
:root {
  /* Background Colors */
  --bg-primary: #05070a;
  --bg-secondary: #1e2028;
  --bg-glass: rgba(235, 241, 255, 0.02);
  --bg-glass-hover: rgba(235, 241, 255, 0.08);
  --bg-glass-active: rgba(235, 241, 255, 0.12);
  
  /* Glass Effect */
  --glass-border: rgba(235, 241, 255, 0.1);
  --glass-blur: 20px;
  
  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: #EBF1FF;
  --text-muted: rgba(255, 255, 255, 0.4);
  
  /* Accent Colors */
  --accent-green: #a7ff8c;
  --accent-green-glow: rgba(167, 255, 140, 0.4);
  --accent-green-bg: rgba(167, 255, 140, 0.2);
  --accent-teal: #2dd4bf;
  --accent-error: #ff8c8e;
  
  /* Shadows & Effects */
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 15px rgba(167, 255, 140, 0.3);
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-slow: 0.5s ease;
  
  /* Gradients */
  --gradient-bg: radial-gradient(ellipse at 10% 10%, rgba(167, 255, 140, 0.08), transparent 40%),
                 radial-gradient(ellipse at 90% 90%, rgba(45, 212, 191, 0.08), transparent 40%),
                 linear-gradient(180deg, #05070a 0%, #0a0f1c 100%);
  --gradient-text: linear-gradient(90deg, #a7ff8c, #ffffff, #2dd4bf);
}

[data-theme="light"] {
  --bg-primary: #f1f5f9;
  --bg-secondary: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.65);
  --bg-glass-hover: rgba(255, 255, 255, 0.9);
  --bg-glass-active: rgba(255, 255, 255, 1);
  
  --glass-border: rgba(0, 0, 0, 0.1);
  
  --text-primary: #0f172a;
  --text-secondary: #1e293b;
  --text-muted: rgba(0, 0, 0, 0.4);
  
  --accent-green: #16a34a;
  --accent-green-glow: rgba(22, 163, 74, 0.2);
  --accent-green-bg: rgba(22, 163, 74, 0.1);
  --accent-teal: #0f766e;
  
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
  
  --gradient-bg: radial-gradient(ellipse at 10% 10%, rgba(22, 163, 74, 0.15), transparent 40%),
                 radial-gradient(ellipse at 90% 90%, rgba(15, 118, 110, 0.15), transparent 40%),
                 linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  --gradient-text: linear-gradient(90deg, #16a34a, #0f172a, #0f766e);
}