:root {
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;

  /* Light Mode (Colorful Theme) */
  --light-bg-gradient: #ffffff;
  --light-bg-color: #ffffff;
  --light-card-bg: #ffffff;
  --light-text-primary: #374151;
  --light-text-hero: rgba(55, 65, 81, 0.85);
  --light-text-secondary: rgba(55, 65, 81, 0.6);
  --light-text-accent-primary: #7b1fa2;
  --light-text-accent-secondary: #1976d2;
  --light-primary-gradient: linear-gradient(135deg, #4caf50, #4caf50, #ff9800, #ff9800, #f44336, #9c27b0, #2196f3);
  --light-primary-horizontal: linear-gradient(90deg, #4caf50, #4caf50, #ff9800, #ff9800, #f44336, #9c27b0, #2196f3);
  --light-shadow-combined: 0 4px 12px rgba(76, 175, 80, 0.3), 0 2px 6px rgba(255, 152, 0, 0.2);
  --light-shadow-hover: 0 6px 16px rgba(76, 175, 80, 0.4), 0 4px 8px rgba(255, 152, 0, 0.3);
  --light-hero-shadow: 0 12px 30px 8px rgba(0, 0, 0, 0.25), 0 6px 15px 4px rgba(0, 0, 0, 0.15);
  --light-input-bg: #fffbf0;
  --light-input-focus: #7b1fa2;
  --light-button-bg: linear-gradient(135deg, #4caf50, #ff9800);
  --light-button-text: #ffffff;
  --light-tab-hover: linear-gradient(90deg, rgba(33, 150, 243, 0.85), rgba(156, 39, 176, 0.85));

  /* Dark Mode (Purple/Blue Theme) */
  --dark-bg-gradient: #2d0847;
  --dark-bg-color: #2d0847;
  --dark-card-bg: #2d0847;
  --dark-text-primary: #ffffff;
  --dark-text-hero: rgba(255, 255, 255, 0.9);
  --dark-text-secondary: rgba(255, 255, 255, 0.7);
  --dark-text-accent-primary: #ba68c8;
  --dark-text-accent-secondary: #64b5f6;
  --dark-primary-gradient: linear-gradient(135deg, #9c27b0, #2196f3);
  --dark-primary-horizontal: linear-gradient(90deg, #2196f3, #9c27b0);
  --dark-shadow-combined: 0 4px 12px rgba(156, 39, 176, 0.3), 0 2px 6px rgba(33, 150, 243, 0.2);
  --dark-shadow-hover: 0 6px 16px rgba(156, 39, 176, 0.4), 0 4px 8px rgba(33, 150, 243, 0.3);
  --dark-hero-shadow: 0 8px 20px 6px rgba(156, 39, 176, 0.3), 0 4px 10px 3px rgba(33, 150, 243, 0.25);
  --dark-input-bg: #2a0f3d;
  --dark-input-focus: #ce93d8;
  --dark-button-bg: linear-gradient(135deg, #9c27b0, #2196f3);
  --dark-button-text: #ffffff;
  --dark-tab-hover: linear-gradient(90deg, rgba(66, 165, 245, 0.9), rgba(186, 104, 200, 0.9));

  /* Default to light mode */
  --bg-gradient: var(--light-bg-gradient);
  --bg-color: var(--light-bg-color);
  --card-bg: var(--light-card-bg);
  --text-primary: var(--light-text-primary);
  --text-hero: var(--light-text-hero);
  --text-secondary: var(--light-text-secondary);
  --text-accent-primary: var(--light-text-accent-primary);
  --text-accent-secondary: var(--light-text-accent-secondary);
  --primary-gradient: var(--light-primary-gradient);
  --primary-horizontal: var(--light-primary-horizontal);
  --shadow-combined: var(--light-shadow-combined);
  --shadow-hover: var(--light-shadow-hover);
  --hero-shadow: var(--light-hero-shadow);
  --input-bg: var(--light-input-bg);
  --input-focus: var(--light-input-focus);
  --button-bg: var(--light-button-bg);
  --button-text: var(--light-button-text);
  --tab-hover: var(--light-tab-hover);
}

/* Dark mode styles */
[data-theme="dark"] {
  --bg-gradient: var(--dark-bg-gradient);
  --bg-color: var(--dark-bg-color);
  --card-bg: var(--dark-card-bg);
  --text-primary: var(--dark-text-primary);
  --text-hero: var(--dark-text-hero);
  --text-secondary: var(--dark-text-secondary);
  --text-accent-primary: var(--dark-text-accent-primary);
  --text-accent-secondary: var(--dark-text-accent-secondary);
  --primary-gradient: var(--dark-primary-gradient);
  --primary-horizontal: var(--dark-primary-horizontal);
  --shadow-combined: var(--dark-shadow-combined);
  --shadow-hover: var(--dark-shadow-hover);
  --hero-shadow: var(--dark-hero-shadow);
  --input-bg: var(--dark-input-bg);
  --input-focus: var(--dark-input-focus);
  --button-bg: var(--dark-button-bg);
  --button-text: var(--dark-button-text);
  --tab-hover: var(--dark-tab-hover);
}

/* Auto detect system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-gradient: var(--dark-bg-gradient);
    --bg-color: var(--dark-bg-color);
    --card-bg: var(--dark-card-bg);
    --text-primary: var(--dark-text-primary);
    --text-hero: var(--dark-text-hero);
    --text-secondary: var(--dark-text-secondary);
    --text-accent-primary: var(--dark-text-accent-primary);
    --text-accent-secondary: var(--dark-text-accent-secondary);
    --primary-gradient: var(--dark-primary-gradient);
    --primary-horizontal: var(--dark-primary-horizontal);
    --shadow-combined: var(--dark-shadow-combined);
    --shadow-hover: var(--dark-shadow-hover);
    --hero-shadow: var(--dark-hero-shadow);
    --input-bg: var(--dark-input-bg);
    --input-focus: var(--dark-input-focus);
    --button-bg: var(--dark-button-bg);
    --button-text: var(--dark-button-text);
    --tab-hover: var(--dark-tab-hover);
  }
}