/* ===============================
   BashWeather - Theme Variables
   =============================== */

:root {
  /* Light Theme (default) */
  --bg-primary: rgba(255, 255, 255, 0.72);
  --bg-secondary: rgba(241, 248, 255, 0.78);
  --bg-tertiary: rgba(224, 238, 252, 0.80);
  --text-primary: #0f2a4a;
  --text-secondary: #3b6080;
  --border-color: rgba(59, 130, 246, 0.18);
  --card-blur: blur(14px);
  --card-shadow: 0 4px 24px rgba(0, 80, 180, 0.10);

  /* Sky */
  --sky-top: #1e8fe0;
  --sky-bottom: #b8ddf5;
  --cloud-color: rgba(255, 255, 255, 0.88);

  /* Colors */
  --color-primary: #1d78d4;
  --color-primary-dark: #1560b0;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;

  /* Weather Colors */
  --color-clear: #fbbf24;
  --color-cloudy: #9ca3af;
  --color-rainy: #6366f1;
  --color-snowy: #e0e7ff;
  --color-storm: #7c3aed;
}

/* Dark Theme */
body.dark-theme {
  --bg-primary: rgba(10, 18, 45, 0.78);
  --bg-secondary: rgba(15, 28, 65, 0.82);
  --bg-tertiary: rgba(22, 42, 90, 0.85);
  --text-primary: #e8f0ff;
  --text-secondary: #8aafd4;
  --border-color: rgba(96, 165, 250, 0.20);
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.40);

  --sky-top: #040b1e;
  --sky-bottom: #0c1e52;
  --cloud-color: rgba(80, 120, 200, 0.30);

  --color-primary: #60a5fa;
  --color-primary-dark: #3b82f6;
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-danger: #f87171;
}

/* Light Theme Explicit */
body.light-theme {
  --bg-primary: rgba(255, 255, 255, 0.72);
  --bg-secondary: rgba(241, 248, 255, 0.78);
  --bg-tertiary: rgba(224, 238, 252, 0.80);
  --text-primary: #0f2a4a;
  --text-secondary: #3b6080;
  --border-color: rgba(59, 130, 246, 0.18);
  --sky-top: #1e8fe0;
  --sky-bottom: #b8ddf5;
  --cloud-color: rgba(255, 255, 255, 0.88);
  --color-primary: #1d78d4;
  --color-primary-dark: #1560b0;
}

/* Auto theme — dark system */
@media (prefers-color-scheme: dark) {
  body.auto-theme {
    --bg-primary: rgba(10, 18, 45, 0.78);
    --bg-secondary: rgba(15, 28, 65, 0.82);
    --bg-tertiary: rgba(22, 42, 90, 0.85);
    --text-primary: #e8f0ff;
    --text-secondary: #8aafd4;
    --border-color: rgba(96, 165, 250, 0.20);
    --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.40);
    --sky-top: #040b1e;
    --sky-bottom: #0c1e52;
    --cloud-color: rgba(80, 120, 200, 0.30);
    --color-primary: #60a5fa;
    --color-primary-dark: #3b82f6;
    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --color-danger: #f87171;
  }
}

/* Auto theme — light system */
@media (prefers-color-scheme: light) {
  body.auto-theme {
    --bg-primary: rgba(255, 255, 255, 0.72);
    --bg-secondary: rgba(241, 248, 255, 0.78);
    --bg-tertiary: rgba(224, 238, 252, 0.80);
    --text-primary: #0f2a4a;
    --text-secondary: #3b6080;
    --border-color: rgba(59, 130, 246, 0.18);
    --sky-top: #1e8fe0;
    --sky-bottom: #b8ddf5;
    --cloud-color: rgba(255, 255, 255, 0.88);
    --color-primary: #1d78d4;
    --color-primary-dark: #1560b0;
  }
}

/* RTL adjustments for Dark Theme */
body.rtl.dark-theme {
  /* Styles automatically flip via direction: rtl */
}

/* Theme transition effect */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Print Styles */
@media print {
  :root {
    --bg-primary: #ffffff;
    --text-primary: #000000;
  }
  
  body {
    background: white;
    color: black;
  }
}