/* Theme Variables - Light & Dark Mode Support */

:root[data-theme="dark"] {
  /* Primary Brand Color - Consistent Rebelle Blue */
  --color-primary: #16A0DB;
  --color-primary-hover: #1db9ff;
  --color-primary-active: #0e7aa8;

  /* Background Colors */
  --bg-main: #1a1a1a;
  --bg-header: #0f0f0f;
  --bg-card: #222;
  --bg-button: #2a2a2a;
  --bg-button-hover: #333;
  --bg-hover: #333;  /* Generic hover background */
  --bg-input: #1a1a1a;
  --bg-overlay: rgba(0, 0, 0, 0.3);
  --bg-highlight: #16A0DB;  /* Active/selected state */

  /* Border Colors */
  --border-main: #2a2a2a;
  --border-card: #333;
  --border-button: #3a3a3a;
  --border-button-hover: #444;
  --border-hover: #16A0DB;  /* Hover border color */
  --border-active: #16A0DB;
  --border-subtle: rgba(22, 160, 219, 0.2);

  /* Text Colors */
  --text-primary: #f0f0f0;
  --text-secondary: #ccc;
  --text-tertiary: #888;
  --text-muted: rgba(255, 255, 255, 0.7);
  --text-active: #FFFFFF;  /* White text on active backgrounds */

  /* Status Colors */
  --color-success: #4ade80;
  --color-error: #ef4444;
  --color-warning: #fbbf24;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

  /* Opacity */
  --opacity-disabled: 0.4;
  --opacity-hover: 0.8;
}

:root[data-theme="light"] {
  /* Primary Brand Color - Same Rebelle Blue */
  --color-primary: #16A0DB;
  --color-primary-hover: #0e8fc4;
  --color-primary-active: #0c7aa8;

  /* Background Colors - Clean White for Contrast */
  --bg-main: #FFFFFF;
  --bg-header: #F9FAFB;
  --bg-card: #FFFFFF;
  --bg-button: #F3F4F6;
  --bg-button-hover: #E5E7EB;
  --bg-hover: #E5E7EB;  /* Generic hover background */
  --bg-input: #FFFFFF;
  --bg-overlay: rgba(255, 255, 255, 0.95);
  --bg-highlight: #16A0DB;  /* Active/selected state */

  /* Border Colors - Visible but Not Heavy */
  --border-main: #D1D5DB;
  --border-card: #E5E7EB;
  --border-button: #D1D5DB;
  --border-button-hover: #9CA3AF;
  --border-hover: #16A0DB;  /* Hover border color */
  --border-active: #16A0DB;
  --border-subtle: rgba(22, 160, 219, 0.3);

  /* Text Colors - High Contrast */
  --text-primary: #111827;
  --text-secondary: #4B5563;
  --text-tertiary: #6B7280;
  --text-muted: rgba(17, 24, 39, 0.7);
  --text-active: #FFFFFF;  /* White text on active backgrounds */

  /* Status Colors - Clear and Visible */
  --color-success: #10B981;
  --color-error: #EF4444;
  --color-warning: #F59E0B;

  /* Shadows - Subtle Definition */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Opacity */
  --opacity-disabled: 0.5;
  --opacity-hover: 0.9;
}

/* Default to dark theme if no data-theme attribute */
:root {
  --color-primary: #16A0DB;
  --color-primary-hover: #1db9ff;
  --color-primary-active: #0e7aa8;
  --bg-main: #1a1a1a;
  --bg-header: #0f0f0f;
  --bg-card: #222;
  --bg-button: #2a2a2a;
  --bg-button-hover: #333;
  --bg-hover: #333;
  --bg-input: #1a1a1a;
  --bg-overlay: rgba(0, 0, 0, 0.3);
  --bg-highlight: #16A0DB;
  --border-main: #2a2a2a;
  --border-card: #333;
  --border-button: #3a3a3a;
  --border-button-hover: #444;
  --border-hover: #16A0DB;
  --border-active: #16A0DB;
  --border-subtle: rgba(22, 160, 219, 0.2);
  --text-primary: #f0f0f0;
  --text-secondary: #ccc;
  --text-tertiary: #888;
  --text-muted: rgba(255, 255, 255, 0.7);
  --text-active: #FFFFFF;
  --color-success: #4ade80;
  --color-error: #ef4444;
  --color-warning: #fbbf24;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --opacity-disabled: 0.4;
  --opacity-hover: 0.8;
}