/* ========================================
   CENTRALIZED THEME FILE 
   Reading Challenge Theme System
   ======================================== */

/* ========================================
   AUTOMATIC SEASONAL SWITCHING
   ======================================== */

/* 
   SEASONS ARE NOW AUTOMATIC!
   
   The season-config.js file automatically:
   - Switches between Summer and Winter based on the current date
   - Updates all colors via CSS variables
   - Changes banner images
   - Displays correct challenge dates with proper years
   
   NO MANUAL UPDATES NEEDED - The system handles everything.
   
   Current Schedule:
   - Summer: June 1 - August 31
   - Winter: December 1 - February 28
   
   To modify seasonal behavior, edit season-config.js
*/

/* ========================================
   DEFAULT SEASONAL COLORS
   These are fallback values if JavaScript doesn't load
   They will be overridden by season-config.js
   ======================================== */

:root {
  /* Default to Winter colors */
  --primary-color: #527ab0; /* Main color - date bar, buttons, highlights */
  --primary-dark: #305384; /* Darker shade - navigation bar background */
  --primary-hover: #3e6087; /* Hover state - interactive elements */

  /* Auto-calculated variations (don't change these) */
  --primary-light: rgba(82, 122, 176, 0.1);
  --primary-border: rgba(82, 122, 176, 0.3);
}

/* ========================================
     CONSTANT COLORS - NEVER CHANGE THESE
     These stay the same across all seasons
     ======================================== */

:root {
  /* Background Colors - Stay constant */
  --background-color: white;
  --background-alt: #f8f9fa;
  --background-light: #fafafa;
  --background-overlay: #f0f0f0;

  /* Text Colors - Stay constant */
  --text-color: white; /* Text on colored backgrounds */
  --text-dark: #2c3e50;
  --text-medium: #555;
  --text-light: #666;
  --text-muted: #64748b;
  --text-black: #000;
  --text-overlay-light: rgba(255, 255, 255, 0.8);

  /* Border Colors - Stay constant */
  --border-color: #cccccc;
  --border-light: #e0e0e0;
  --border-lighter: #eee;
  --border-lightest: #e2e8f0;
  --border-dark: #ddd;
  --light-border: #e2e8f0;

  /* Overlay Colors - Stay constant */
  --overlay-light: rgba(255, 255, 255, 0.15);
  --overlay-medium: rgba(255, 255, 255, 0.25);
  --overlay-strong: rgba(255, 255, 255, 0.3);
  --overlay-border: rgba(255, 255, 255, 0.25);
  --overlay-border-strong: rgba(255, 255, 255, 0.5);

  /* Shadow Colors - Stay constant */
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.12);
  --shadow-strong: rgba(0, 0, 0, 0.15);
  --shadow-dark: rgba(0, 0, 0, 0.2);

  /* UI Feedback Colors - Stay constant */
  --error-color: #dc2626;
  --error-bg: #fef2f2;
  --error-border: #fecaca;
  --success-color: #166534;
  --success-bg: #dcfce7;
  --success-border: #bbf7d0;
  --warning-bg: #fef3c7;
  --warning-border: #fcd34d;
  --warning-text: #92400e;

  /* Utility Colors - Stay constant */
  --star-color: #fbbf24;
  --neutral-gray: #666;
  --light-gray: #f8fafc;
  --medium-gray: #64748b;
  --disabled-gray: #ccc;
  --disabled-text: #999;
  --spinner-border: #e2e8f0;

  /* Social Media Brand Colors - Never change */
  --social-facebook: #1877f2;
  --social-instagram: #e4405f;
  --social-twitter: #000000;
  --social-youtube: #ff0000;
  --social-tiktok: #000000;
}

/* ========================================
     SHARED BANNER STYLING
     ======================================== */

/* Banner image - Updated automatically by season-config.js */
.banner-image {
  width: 100%;
  height: auto;
  max-height: 225px;
  object-fit: cover;
  display: block;
}

/* Challenge Banner Container */
.challenge-banner {
  background-color: var(--background-color);
  padding: 0;
}

/* ========================================
     HOW TO CUSTOMIZE SEASONS
     ======================================== */

/* 
   TO CHANGE SEASONAL COLORS:
   Edit season-config.js and update the colors for each season:
   
   Summer colors:
   - primaryColor: "#ff6b35"
   - primaryDark: "#d9480f"
   - primaryHover: "#ff8a50"
   
   Winter colors:
   - primaryColor: "#527ab0"
   - primaryDark: "#305384"
   - primaryHover: "#3e6087"
   
   TO CHANGE SEASONAL DATES:
   Edit season-config.js and update:
   - startMonth and startDay
   - endMonth and endDay
   
   TO CHANGE BANNER IMAGES:
   Place your banner images at:
   - /reading-challenge/images/summer.png
   - /reading-challenge/images/winter.png
   
   Or update the bannerImage paths in season-config.js
   
   That's it! The system handles everything else automatically.
*/