/**
 * Brand Color Palette
 * Mountain Photography Website
 * 
 * Primary Colors:
 *   Mountain Blue #7496b4 - Main brand color (CTAs, links, headers)
 *   Deep Mountain Blue #567388 - Hover states and emphasis
 *   Sky Blue #a5b4c3 - Backgrounds and subtle accents
 * 
 * Secondary & Accent Colors:
 *   Earth Brown #99816b - Warm secondary color
 *   Golden Wheat #c1ab4b - Highlights and callouts
 * 
 * Neutral Colors:
 *   Cloud White #dbe7ef - Light backgrounds
 *   Stone Gray #5f5c45 - Secondary text
 *   Charcoal #2f3130 - Primary text
 *   Rich Earth #573f11 - Footer/dark accents
 */

:root {
  /* ========================================
     PRIMARY COLORS - Mountain Blues
     ======================================== */
  
  /* Mountain Blue - Main brand color */
  --color-mountain-blue: #7496b4;
  --color-mountain-blue-rgb: 116, 150, 180;
  
  /* Deep Mountain Blue - Darker variant */
  --color-deep-mountain-blue: #567388;
  --color-deep-mountain-blue-rgb: 86, 115, 136;
  
  /* Sky Blue - Lighter shade */
  --color-sky-blue: #a5b4c3;
  --color-sky-blue-rgb: 165, 180, 195;
  
  /* ========================================
     SECONDARY & ACCENT COLORS
     ======================================== */
  
  /* Earth Brown - Warm secondary */
  --color-earth-brown: #99816b;
  --color-earth-brown-rgb: 153, 129, 107;
  
  /* Golden Wheat - Vibrant accent */
  --color-golden-wheat: #c1ab4b;
  --color-golden-wheat-rgb: 193, 171, 75;
  
  /* ========================================
     NEUTRAL COLORS
     ======================================== */
  
  /* Cloud White - Light background */
  --color-cloud-white: #dbe7ef;
  --color-cloud-white-rgb: 219, 231, 239;
  
  /* Stone Gray - Secondary text */
  --color-stone-gray: #5f5c45;
  --color-stone-gray-rgb: 95, 92, 69;
  
  /* Charcoal - Primary text */
  --color-charcoal: #2f3130;
  --color-charcoal-rgb: 47, 49, 48;
  
  /* Rich Earth - Footer/dark accents */
  --color-rich-earth: #573f11;
  --color-rich-earth-rgb: 87, 63, 17;
  
  /* ========================================
     SEMANTIC COLOR ALIASES
     ======================================== */
  
  /* Brand */
  --color-primary: var(--color-mountain-blue);
  --color-primary-hover: var(--color-deep-mountain-blue);
  --color-primary-light: var(--color-sky-blue);
  
  /* Secondary */
  --color-secondary: var(--color-earth-brown);
  --color-accent: var(--color-golden-wheat);
  
  /* Text */
  --color-text-primary: var(--color-charcoal);
  --color-text-secondary: var(--color-stone-gray);
  --color-text-inverse: var(--color-cloud-white);
  
  /* Backgrounds */
  --color-bg-light: var(--color-cloud-white);
  --color-bg-dark: var(--color-rich-earth);
  
  /* Interactive States */
  --color-link: var(--color-mountain-blue);
  --color-link-hover: var(--color-deep-mountain-blue);
  --color-cta: var(--color-mountain-blue);
  --color-cta-hover: var(--color-deep-mountain-blue);
  
  /* Footer */
  --color-footer-bg: var(--color-rich-earth);
  --color-footer-text: var(--color-cloud-white);
}

/* ========================================
   UTILITY CLASSES - Background Colors
   ======================================== */

.bg-mountain-blue { background-color: var(--color-mountain-blue); }
.bg-deep-mountain-blue { background-color: var(--color-deep-mountain-blue); }
.bg-sky-blue { background-color: var(--color-sky-blue); }
.bg-earth-brown { background-color: var(--color-earth-brown); }
.bg-golden-wheat { background-color: var(--color-golden-wheat); }
.bg-cloud-white { background-color: var(--color-cloud-white); }
.bg-stone-gray { background-color: var(--color-stone-gray); }
.bg-charcoal { background-color: var(--color-charcoal); }
.bg-rich-earth { background-color: var(--color-rich-earth); }

/* Semantic backgrounds */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }

/* ========================================
   UTILITY CLASSES - Text Colors
   ======================================== */

.text-mountain-blue { color: var(--color-mountain-blue); }
.text-deep-mountain-blue { color: var(--color-deep-mountain-blue); }
.text-sky-blue { color: var(--color-sky-blue); }
.text-earth-brown { color: var(--color-earth-brown); }
.text-golden-wheat { color: var(--color-golden-wheat); }
.text-cloud-white { color: var(--color-cloud-white); }
.text-stone-gray { color: var(--color-stone-gray); }
.text-charcoal { color: var(--color-charcoal); }
.text-rich-earth { color: var(--color-rich-earth); }

/* Semantic text colors */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-inverse { color: var(--color-text-inverse); }

/* ========================================
   UTILITY CLASSES - Border Colors
   ======================================== */

.border-mountain-blue { border-color: var(--color-mountain-blue); }
.border-deep-mountain-blue { border-color: var(--color-deep-mountain-blue); }
.border-sky-blue { border-color: var(--color-sky-blue); }
.border-earth-brown { border-color: var(--color-earth-brown); }
.border-golden-wheat { border-color: var(--color-golden-wheat); }
.border-cloud-white { border-color: var(--color-cloud-white); }
.border-stone-gray { border-color: var(--color-stone-gray); }
.border-charcoal { border-color: var(--color-charcoal); }
.border-rich-earth { border-color: var(--color-rich-earth); }

/* ========================================
   COMPONENT STYLES
   ======================================== */

/* Links */
.brand-link {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

.brand-link:hover,
.brand-link:focus {
  color: var(--color-link-hover);
}

/* Buttons */
.btn-primary {
  background-color: var(--color-cta);
  color: var(--color-cloud-white);
  border: none;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-cta-hover);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-cloud-white);
  border: none;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.btn-secondary:hover,
.btn-secondary:focus {
  opacity: 0.9;
}

.btn-accent {
  background-color: var(--color-accent);
  color: var(--color-charcoal);
  border: none;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.btn-accent:hover,
.btn-accent:focus {
  opacity: 0.9;
}

/* Headers */
.brand-heading {
  color: var(--color-mountain-blue);
}

/* Footer */
.brand-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
}

/* Cards with subtle background */
.brand-card {
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-sky-blue);
}

/* Highlight/Callout boxes */
.brand-callout {
  background-color: rgba(var(--color-golden-wheat-rgb), 0.15);
  border-left: 4px solid var(--color-golden-wheat);
  padding: 1rem;
}