/* CSS Variables for Theme Support */
:root {
  /* Light Theme Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #ecf0f1;
  --text-primary: #2c3e50;
  --text-secondary: #7f8c8d;
  --text-muted: #666;
  --border-color: #dee2e6;
  --border-light: #bdc3c7;
  --shadow: rgba(0, 0, 0, 0.1);
  --shadow-strong: rgba(0, 0, 0, 0.3);

  /* Accent Colors */
  --accent-blue: #3498db;
  --accent-green: #27ae60;
  --accent-orange: #f39c12;
  --accent-red: #e74c3c;
  --accent-purple: #9b59b6;
  --accent-gray: #6c757d;

  /* Building Colors */
  --building-empty: #ecf0f1;
  --building-house: #e8f5e8;
  --building-forester: #e8f4fd;
  --building-market: #fef9e7;
}

/* System Dark Theme - Only when no manual theme class is present */
@media (prefers-color-scheme: dark) {
  :root:not(.light-theme) {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-muted: #888;
    --border-color: #404040;
    --border-light: #555;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-strong: rgba(0, 0, 0, 0.6);

    /* Building Colors for Dark Theme */
    --building-empty: #3a3a3a;
    --building-house: #2d4a2d;
    --building-forester: #2d3a4a;
    --building-market: #4a3d2d;
  }
}

/* Dark Theme Class Override */
.dark-theme {
  --bg-primary: #1a1a1a !important;
  --bg-secondary: #2d2d2d !important;
  --bg-tertiary: #3a3a3a !important;
  --text-primary: #ffffff !important;
  --text-secondary: #b0b0b0 !important;
  --text-muted: #888 !important;
  --border-color: #404040 !important;
  --border-light: #555 !important;
  --shadow: rgba(0, 0, 0, 0.3) !important;
  --shadow-strong: rgba(0, 0, 0, 0.6) !important;
  --building-empty: #3a3a3a !important;
  --building-house: #2d4a2d !important;
  --building-forester: #2d3a4a !important;
  --building-market: #4a3d2d !important;
}

/* Light Theme Class Override */
.light-theme {
  --bg-primary: #ffffff !important;
  --bg-secondary: #f8f9fa !important;
  --bg-tertiary: #ecf0f1 !important;
  --text-primary: #2c3e50 !important;
  --text-secondary: #7f8c8d !important;
  --text-muted: #666 !important;
  --border-color: #dee2e6 !important;
  --border-light: #bdc3c7 !important;
  --shadow: rgba(0, 0, 0, 0.1) !important;
  --shadow-strong: rgba(0, 0, 0, 0.3) !important;
  --building-empty: #ecf0f1 !important;
  --building-house: #e8f5e8 !important;
  --building-forester: #e8f4fd !important;
  --building-market: #fef9e7 !important;
}

/* Force theme application with higher specificity */
html.dark-theme {
  --bg-primary: #1a1a1a !important;
  --bg-secondary: #2d2d2d !important;
  --bg-tertiary: #3a3a3a !important;
  --text-primary: #ffffff !important;
  --text-secondary: #b0b0b0 !important;
  --text-muted: #888 !important;
  --border-color: #404040 !important;
  --border-light: #555 !important;
  --shadow: rgba(0, 0, 0, 0.3) !important;
  --shadow-strong: rgba(0, 0, 0, 0.6) !important;
  --building-empty: #3a3a3a !important;
  --building-house: #2d4a2d !important;
  --building-forester: #2d3a4a !important;
  --building-market: #4a3d2d !important;
}

html.light-theme {
  --bg-primary: #ffffff !important;
  --bg-secondary: #f8f9fa !important;
  --bg-tertiary: #ecf0f1 !important;
  --text-primary: #2c3e50 !important;
  --text-secondary: #7f8c8d !important;
  --text-muted: #666 !important;
  --border-color: #dee2e6 !important;
  --border-light: #bdc3c7 !important;
  --shadow: rgba(0, 0, 0, 0.1) !important;
  --shadow-strong: rgba(0, 0, 0, 0.3) !important;
  --building-empty: #ecf0f1 !important;
  --building-house: #e8f5e8 !important;
  --building-forester: #e8f4fd !important;
  --building-market: #fef9e7 !important;
}