/* theme-variables.css */
:root {
  /* Core brand colors */
  --primary: #FFD700;       
  --primary-dark: #B8860B;  
  --primary-rgb: 255, 215, 0;
  
  --secondary: #7C5CFF;     
  --secondary-rgb: 124, 92, 255;

  --success: #43E97B;
  --danger: #FF4757;
  --warning: #FFA502;
  --info: #00D2FF;
  --gold: #FFD700;
  --accent: #43E97B;

  /* Sizing and borders */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 32px;
  --r-full: 999px;
  
  --tr-fast: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --tr-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --tr-med: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --tr-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 
  DARK MODE (Default / Preferred)
  Deep Space Dark Mode
*/
:root, [data-theme="dark"] {
  --bg-main: #0a0a12;       
  --bg-1: #0a0a12;
  --bg-2: #12121e;
  --bg-3: #1a1a2e;
  --bg-card: rgba(24, 24, 38, 0.85);
  --bg-card-hover: rgba(30, 30, 50, 0.9);
  --bg-glass: rgba(255, 255, 255, 0.05);
  --bg-overlay: rgba(0, 0, 0, 0.7);
  
  --text-1: #ffffff;
  --text-2: rgba(255, 255, 255, 0.85);
  --text-3: rgba(255, 255, 255, 0.6);
  --text-4: rgba(255, 255, 255, 0.4);

  --glass: rgba(255, 255, 255, 0.05);
  --glass-strong: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-dark: rgba(0, 0, 0, 0.4);
  
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-primary: 0 4px 20px rgba(255, 215, 0, 0.3);
  --glow-primary: 0 8px 30px rgba(255, 215, 0, 0.45);
  
  --bg-input: rgba(0,0,0,0.2);
  --r-xl: 32px;
  --accent-blue: #00D2FF;
}

/* 
  LIGHT MODE
  Crisp Pearl Light Mode
*/
[data-theme="light"] {
  --bg-main: #f4f6fa;
  --bg-1: #f4f6fa;
  --bg-2: #ffffff;
  --bg-3: #eef0f6;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: rgba(255, 255, 255, 0.95);
  --bg-glass: rgba(255, 255, 255, 0.6);
  --bg-overlay: rgba(255, 255, 255, 0.7);
  
  --text-1: #1a1a2e;
  --text-2: rgba(26, 26, 46, 0.85);
  --text-3: rgba(26, 26, 46, 0.6);
  --text-4: rgba(26, 26, 46, 0.4);

  --glass: rgba(255, 255, 255, 0.7);
  --glass-strong: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-dark: rgba(0, 0, 0, 0.1);
  
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-primary: 0 4px 20px rgba(184, 134, 11, 0.3);
  --glow-primary: 0 8px 30px rgba(184, 134, 11, 0.35);
  
  --bg-input: rgba(255,255,255,0.9);
  --r-xl: 32px;
  --accent-blue: #0093E9;
}

/* Auto (System) Preference overrides light mode if system is dark */
@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --bg-main: #f4f6fa;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-glass: rgba(255, 255, 255, 0.6);
    --bg-overlay: rgba(255, 255, 255, 0.7);
    --text-1: #1a1a2e;
    --text-2: rgba(26, 26, 46, 0.85);
    --text-3: rgba(26, 26, 46, 0.6);
    --text-4: rgba(26, 26, 46, 0.4);
    --glass: rgba(255, 255, 255, 0.7);
    --glass-strong: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(0, 0, 0, 0.06);
    --glass-dark: rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
    --shadow-primary: 0 4px 20px rgba(184, 134, 11, 0.3);
    --bg-input: rgba(255,255,255,0.9);
  }
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg-main: #0a0a12;       
    --bg-card: rgba(24, 24, 38, 0.85);
    --bg-glass: rgba(255, 255, 255, 0.05);
    --bg-overlay: rgba(0, 0, 0, 0.7);
    --text-1: #ffffff;
    --text-2: rgba(255, 255, 255, 0.85);
    --text-3: rgba(255, 255, 255, 0.6);
    --text-4: rgba(255, 255, 255, 0.4);
    --glass: rgba(255, 255, 255, 0.05);
    --glass-strong: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-dark: rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-primary: 0 4px 20px rgba(255, 215, 0, 0.3);
    --bg-input: rgba(0,0,0,0.2);
  }
}