/* =====================================================
   trailpalette.com — Color Stylesheet
   Load this file in index.html
   so all div/card colors are controlled from here.

   Change any color by editing the :root variables below.
   Rules use semantic classes: .theme-page, .card, .card-inner,
   .card-alert, .card-info-moon, .card-info-sky, etc.
   ===================================================== */

:root {

  /* --- Page background (sky blue) --- */
  --page-bg-from:              #87CEEB;
  --page-bg-to:                #87CEEB;

  /* --- Card shell (header + main content panels) --- */
  --card-shell-bg:             #FFFFFF;
  --card-shell-border:         #b0d4e8;

  /* --- Generic inner cards (most data cards) --- */
  --card-inner-bg:             #FFFFFF;
  --card-inner-border:         #e5e5e5;

  /* --- Text --- */
  --theme-text:                #171717;
  --theme-text-secondary:      #525252;
  --theme-text-muted:          #737373;
  --theme-accent:              #0284c7;

  /* --- Weather Alerts card --- */
  --alerts-card-bg:            #FFFFFF;
  --alerts-card-border:        #e5e5e5;
  --alerts-accent-border:     #b45309;   /* left-edge accent */
  --alerts-link-color:        #b45309;
  --alerts-filter-active-bg:  #e5e5e5;
  --alerts-filter-active-text: #171717;
  --alerts-filter-inactive-bg: #FFFFFF;
  --alerts-filter-inactive-text: #171717;

  /* --- Current conditions (temp, feels like, description) --- */
  --current-card-bg:           #FFFFFF;
  --current-card-border:       #e5e5e5;
  --current-temp-color:        #171717;

  /* --- Temperature by hour / Precipitation / Humidity / Wind --- */
  --temp-hour-card-bg:         #FFFFFF;
  --temp-hour-card-border:     #e5e5e5;
  --temp-hour-title-color:     #171717;

  /* --- Storm Photography card --- */
  --storm-card-bg:             #FFFFFF;
  --storm-card-border:         #e5e5e5;
  --storm-title-color:         #171717;

  /* --- Cloud Cover card --- */
  --cloud-card-bg:             #FFFFFF;
  --cloud-card-border:         #e5e5e5;
  --cloud-title-color:         #171717;

  /* --- Blue Sky Index card --- */
  --bluesky-card-bg:           #FFFFFF;
  --bluesky-card-border:       #e5e5e5;
  --bluesky-title-color:       #171717;

  /* --- Fluffy Clouds Index card --- */
  --fluffyclouds-card-bg:      #FFFFFF;
  --fluffyclouds-card-border:  #e5e5e5;
  --fluffyclouds-title-color:  #171717;

  /* --- Sunrise & Sunset card --- */
  --sunrise-card-bg:           #FFFFFF;
  --sunrise-card-border:       #e5e5e5;
  --sunrise-title-color:       #171717;

  /* --- Golden Hour card (golden tint behind white content boxes) --- */
  --golden-card-bg:            #fffbeb;   /* amber-50 golden tint */
  --golden-card-border:        #fde68a;   /* amber-200 */
  --golden-title-color:        #171717;

  /* --- Blue Hour card (dark blue/purple tint behind white content boxes) --- */
  --bluehour-card-bg:          #e0e7ff;   /* indigo-100 */
  --bluehour-card-border:      #a5b4fc;   /* indigo-300 */
  --bluehour-title-color:      #171717;

  /* --- Moon Phase card (same panel as other cards) --- */
  --moon-card-bg:              #FFFFFF;
  --moon-card-border:          #e5e5e5;
  --moon-title-color:          #171717;

  /* --- Fog / Mist card --- */
  --fog-card-bg:               #FFFFFF;
  --fog-card-border:           #e5e5e5;
  --fog-title-color:           #171717;

  /* --- Astrophotography card --- */
  --astro-card-bg:             #FFFFFF;
  --astro-card-border:         #e5e5e5;
  --astro-title-color:         #171717;

  /* --- UV Index card --- */
  --uv-card-bg:                #FFFFFF;
  --uv-card-border:            #e5e5e5;
  --uv-title-color:            #171717;

  /* --- Air Quality (AQI) card --- */
  --aqi-card-bg:               #FFFFFF;
  --aqi-card-border:           #e5e5e5;
  --aqi-title-color:           #171717;

  /* --- Sky info (fluffy cloud description) --- */
  --sky-card-bg:               #e0f2fe;
  --sky-card-border:           #7dd3fc;
  --sky-title-color:            #0c4a6e;

  /* --- Score-tier card backgrounds (default grey; good / fair / poor override) --- */
  --card-score-default-bg:    #f3f4f6;   /* light grey - base for condition cards */
  --card-score-default-border: #e5e7eb;
  --card-score-good-bg:        #f0fdf4;   /* pale green */
  --card-score-good-border:    #bbf7d0;
  --card-score-fair-bg:        #fffbeb;   /* pale yellow/amber, alerts-style */
  --card-score-fair-border:    #fde68a;
  --card-score-poor-bg:        #fdf2f8;   /* pale pink */
  --card-score-poor-border:    #fbcfe8;

  /* --- Error / danger --- */
  --error-bg:                  #fef2f2;
  --error-border:              #b91c1c;
  --error-text:                #b91c1c;

  /* --- Tabs (Current / Daily) --- */
  --tab-active-bg:             #0284c7;
  --tab-active-text:           #FFFFFF;
  --tab-inactive-bg:           #FFFFFF;
  --tab-inactive-text:         #525252;
}


/* =====================================================
   PAGE & SHELL
   ===================================================== */

.theme-page {
  background: linear-gradient(to bottom, var(--page-bg-from), var(--page-bg-to)) !important;
  color: var(--theme-text);
}

.card {
  background-color: var(--card-shell-bg) !important;
  border-color: var(--card-shell-border) !important;
  color: var(--theme-text);
}

.card-panel-top,
.card-panel-bottom {
  background-color: var(--card-shell-bg) !important;
  border-color: var(--card-shell-border) !important;
}


/* =====================================================
   GENERIC INNER CARDS (temp by hour, precip, humidity, wind, etc.)
   ===================================================== */

.card-inner {
  background-color: var(--card-inner-bg) !important;
  border-color: var(--card-inner-border) !important;
  color: var(--theme-text);
}

.card-inner h3,
.card-inner .font-bold,
.card-inner p,
.card-inner span {
  color: var(--theme-text) !important;
}

.card-inner .text-xl {
  color: var(--theme-text-secondary) !important;
}

.card-inner input,
.card-inner select,
.card-inner textarea {
  background: var(--card-inner-bg) !important;
  border-color: var(--card-inner-border) !important;
  color: var(--theme-text) !important;
}

.card-inner label {
  color: var(--theme-text-secondary) !important;
}

.card-inner button:hover {
  background: var(--card-inner-border) !important;
}

/* Golden Hour card: golden background (content boxes stay white via .card-inner.bg-amber-50 .bg-white in index.html) */
.card-inner.card-golden-hour {
  background-color: var(--golden-card-bg) !important;
  border-color: var(--golden-card-border) !important;
}

/* Blue Hour card: dark blue/purple background (content boxes stay white via .card-blue-hour .bg-white in index.html) */
.card-inner.card-blue-hour {
  background-color: var(--bluehour-card-bg) !important;
  border-color: var(--bluehour-card-border) !important;
}

/* Score-tier: default light grey for all condition cards; then good/fair/poor override */
.card-inner.card-score-good,
.card-inner.card-score-fair,
.card-inner.card-score-poor {
  background-color: var(--card-score-default-bg) !important;
  border-color: var(--card-score-default-border) !important;
  color: var(--theme-text);
}

.card-inner.card-score-good {
  background-color: var(--card-score-good-bg) !important;
  border-color: var(--card-score-good-border) !important;
}

.card-inner.card-score-fair {
  background-color: var(--card-score-fair-bg) !important;
  border-color: var(--card-score-fair-border) !important;
}

.card-inner.card-score-poor {
  background-color: var(--card-score-poor-bg) !important;
  border-color: var(--card-score-poor-border) !important;
}


/* =====================================================
   WEATHER ALERTS CARD
   ===================================================== */

.card-alert {
  background-color: var(--alerts-card-bg) !important;
  border: 1px solid var(--alerts-card-border) !important;
  border-left: 4px solid var(--alerts-accent-border) !important;
  color: var(--theme-text) !important;
}

.card-alert h3,
.card-alert p,
.card-alert span,
.card-alert li {
  color: var(--theme-text) !important;
}

.card-alert a {
  color: var(--alerts-link-color) !important;
}

.card-alert .bg-amber-200 {
  background: var(--alerts-filter-active-bg) !important;
  color: var(--alerts-filter-active-text) !important;
}

.card-alert .bg-amber-50 {
  background: var(--alerts-filter-inactive-bg) !important;
  color: var(--alerts-filter-inactive-text) !important;
  border-color: var(--card-inner-border) !important;
}


/* =====================================================
   VIEW TABS (Current / Daily)
   ===================================================== */

.card-panel-top .bg-blue-500 {
  background: var(--tab-active-bg) !important;
  color: var(--tab-active-text) !important;
}

.card-panel-top .bg-gray-100 {
  background: var(--tab-inactive-bg) !important;
  color: var(--tab-inactive-text) !important;
  border: 1px solid var(--card-inner-border);
}


/* =====================================================
   MOON PHASE CARD
   ===================================================== */

.card-info-moon {
  background: var(--moon-card-bg) !important;
  border-color: var(--moon-card-border) !important;
  color: var(--moon-title-color) !important;
}

.card-info-moon h3,
.card-info-moon p,
.card-info-moon span {
  color: var(--moon-title-color) !important;
}


/* =====================================================
   SKY INFO (fluffy cloud description)
   ===================================================== */

.card-info-sky {
  background: var(--sky-card-bg) !important;
  border-color: var(--sky-card-border) !important;
  color: var(--sky-title-color) !important;
}


/* =====================================================
   ERROR MESSAGE BLOCKS
   ===================================================== */

.card-inner[style*="theme-error-bg"],
.card-error {
  background: var(--error-bg) !important;
  border-color: var(--error-border) !important;
  color: var(--error-text) !important;
}


/* =====================================================
   UTILITY / THEME TEXT
   ===================================================== */

/* Never allow white or very light text on light card content (avoids white-on-white).
   Pills/badges with dark gradients use .bg-gradient-to-r and keep white text. */
.card-inner p.text-white,
.card-inner h3.text-white,
.card-inner span.text-white,
.card-inner .text-gray-100,
.card-inner .text-gray-200,
.card-inner .text-gray-300 {
  color: var(--theme-text) !important;
}

.theme-heading {
  color: var(--theme-text) !important;
}

.theme-muted {
  color: var(--theme-text-muted) !important;
}

.theme-secondary {
  color: var(--theme-text-secondary) !important;
}

.theme-accent {
  color: var(--theme-accent) !important;
}