/* City-specific theme variables - easily configurable for different cities */
:root {
  /* City colors - can be dynamically set via JavaScript */
  --city-primary: #efe4b0;      /* Main city theme color (cream for Milwaukee) */
  --city-secondary: #007a33;    /* Secondary color (station green for Milwaukee) */
  --city-background: #ffffff;   /* Background color */
  --city-text: #000000;        /* Main text color */
  --city-text-light: #666666;  /* Muted text color */
  
  /* Legacy compatibility - map old variables to new configurable ones */
  --citycolor: var(--city-primary);
  --stationcolor: var(--city-secondary);
  --bg: var(--city-background);
  --text: var(--city-text);
  --muted: var(--city-text-light);
  
  /* Standard theme variables */
  --card: #f7f7f9;
  --accent: #c62828;
  --radius: 10px;
  --shadow: 0 6px 18px rgba(0,0,0,0.08);
  
  /* Typography */
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* City-specific styling classes that can be applied conditionally */
.city-header {
  background-color: var(--city-primary);
  color: var(--city-text);
}

.city-accent {
  background-color: var(--city-secondary);
  color: white;
}

.city-themed-button {
  background-color: var(--city-primary);
  color: var(--city-text);
  border: 1px solid var(--city-secondary);
}

.city-themed-button:hover {
  background-color: var(--city-secondary);
  color: white;
}

/* News widget city theming */
.widget-header {
  background: var(--city-secondary);
  color: white;
}

/* Business directory city theming */
.category-header {
  background: var(--city-primary);
  color: var(--city-text);
}