/* ==========================================================================
   Tres Leches House of Cakes - Gemini Design Implementation
   "Celebratory Elegance" - Luxury Wedding Cakes, Quinceañeras, Artisan Bakes

   Implementing the design document EXACTLY as specified:
   - Agave Teal (#49A6A9): Primary Brand Identity (Logo & Main Accents)
   - Dulce Rose (#E8A398): Secondary Color (Warmth)
   - Golden Star (#F7D16B): Luxury Accent (Decorative ONLY - fails accessibility)
   - Digital Gold (#B38B2D): Accessible buttons/links
   - Crema Base (#FFF9F0): Backgrounds
   - Cacao Bean (#5D4037): Primary Text
   - Midnight Mantle (#2C4C4D): Special Events / High-contrast depth
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     Master Color Palette - Exactly as specified
     -------------------------------------------------------------------------- */

  /* Crema Base - The "Milk" Neutral (Backgrounds, Clean Space) */
  --color-cream: #FFF9F0;
  --color-cream-dark: #F5EDE4;
  --color-vanilla: #FFFCF7;

  /* Agave Teal - Primary Brand Identity (Logo & Main Accents) */
  --color-teal: #49A6A9;
  --color-teal-dark: #3D8A8D;
  --color-teal-light: #7FC4C6;

  /* Dulce Rose - Secondary Color (Warmth, Ribbons, Packaging) */
  --color-rose: #E8A398;
  --color-rose-light: #F5D5D5;
  --color-rose-dark: #D4847C;

  /* Golden Star - Luxury Accent (DECORATIVE ONLY - fails accessibility) */
  --color-gold-decorative: #F7D16B;

  /* Digital Gold - Accessible version for buttons/links */
  --color-gold: #B38B2D;
  --color-gold-dark: #96741F;
  --color-gold-light: #D4A94A;

  /* Cacao Bean - Primary Text Color */
  --color-chocolate: #5D4037;
  --color-chocolate-light: #7D6052;

  /* Midnight Mantle - Special Events (High-contrast depth for luxury) */
  --color-midnight: #2C4C4D;
  --color-midnight-light: #3D5A5B;

  /* White */
  --color-white: #FFFFFF;

  /* Map to existing variable names for compatibility */
  --color-caramel: var(--color-gold);
  --color-caramel-dark: var(--color-gold-dark);
  --color-caramel-light: #E8C9A8;
  --color-strawberry: var(--color-rose-dark);

  /* --------------------------------------------------------------------------
     Shadows - Neutral, sophisticated
     -------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(93, 64, 55, 0.05);
  --shadow-md: 0 4px 6px rgba(93, 64, 55, 0.08), 0 2px 4px rgba(93, 64, 55, 0.04);
  --shadow-lg: 0 10px 25px rgba(93, 64, 55, 0.10), 0 4px 10px rgba(93, 64, 55, 0.05);
  --shadow-xl: 0 20px 40px rgba(93, 64, 55, 0.12), 0 8px 16px rgba(93, 64, 55, 0.06);
}

/* --------------------------------------------------------------------------
   Selection - Rose highlight (warm)
   -------------------------------------------------------------------------- */
::selection {
  background-color: var(--color-rose-light);
  color: var(--color-chocolate);
}

/* --------------------------------------------------------------------------
   Focus States - Teal ring (brand identity)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Hero Section - Clean Crema Base background
   -------------------------------------------------------------------------- */
.hero {
  background: linear-gradient(
    135deg,
    var(--color-cream) 0%,
    var(--color-vanilla) 50%,
    var(--color-cream-dark) 100%
  );
}

.hero::before {
  background: radial-gradient(ellipse at center, var(--color-rose-light) 0%, transparent 70%);
}

.hero::after {
  background: radial-gradient(ellipse at center, rgba(247, 209, 107, 0.3) 0%, transparent 70%); /* Subtle gold wash */
}

/* Hero title emphasis */
.hero-title em {
  color: var(--color-teal);
}

/* --------------------------------------------------------------------------
   Navbar Brand - Agave Teal for brand identity
   -------------------------------------------------------------------------- */
.navbar-brand .brand-text {
  color: var(--color-chocolate);
}

.navbar-brand .brand-subtitle {
  color: var(--color-teal);
}

.navbar-brand:hover .brand-text {
  color: var(--color-teal);
}

/* Nav link underline - Teal */
.nav-link::after {
  background: var(--color-teal);
}

/* --------------------------------------------------------------------------
   Buttons - Digital Gold (#B38B2D) for accessibility
   -------------------------------------------------------------------------- */
.btn-primary {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-white);
  box-shadow: 0 4px 14px rgba(179, 139, 45, 0.3);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
  color: var(--color-white);
  box-shadow: 0 6px 20px rgba(179, 139, 45, 0.4);
}

.btn-secondary {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-white);
}

/* Navigation CTA button - Gold */
.nav-link.btn-nav {
  background: var(--color-gold);
}

.nav-link.btn-nav:hover {
  background: var(--color-gold-dark);
}

/* --------------------------------------------------------------------------
   Links - Teal for brand consistency
   -------------------------------------------------------------------------- */
a {
  color: var(--color-teal);
}

a:hover {
  color: var(--color-teal-dark);
}

/* --------------------------------------------------------------------------
   Feature Cards - Warm gradient (Rose to subtle gold)
   -------------------------------------------------------------------------- */
.feature-icon {
  background: linear-gradient(135deg, var(--color-rose-light) 0%, rgba(247, 209, 107, 0.4) 100%);
}

/* --------------------------------------------------------------------------
   CTA Section - Midnight Mantle for luxury depth
   -------------------------------------------------------------------------- */
.cta-section {
  background: linear-gradient(135deg, var(--color-midnight) 0%, var(--color-midnight-light) 100%);
}

.cta-section::before {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23F7D16B' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.cta-section .btn-primary {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.cta-section .btn-primary:hover {
  background: var(--color-cream);
  border-color: var(--color-cream);
  color: var(--color-midnight);
}

/* --------------------------------------------------------------------------
   Footer - Midnight Mantle base with Teal accents
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-midnight);
}

.footer-wave {
  color: var(--color-midnight);
}

.footer-brand .brand-text {
  color: var(--color-cream);
}

.footer-brand .brand-subtitle {
  color: var(--color-teal-light);
}

.footer-tagline {
  color: var(--color-teal-light);
}

.footer-heading {
  color: var(--color-cream);
}

.social-link {
  background: rgba(255, 249, 240, 0.1);
  color: var(--color-cream);
}

.social-link:hover {
  background: var(--color-teal);
  color: var(--color-white);
}

.footer-address a {
  color: var(--color-teal-light);
}

.footer-address a:hover {
  color: var(--color-cream);
}

.footer-links a {
  color: rgba(255, 249, 240, 0.8);
}

.footer-links a:hover {
  color: var(--color-teal-light);
}

.appointment-notice {
  color: var(--color-teal-light);
}

/* --------------------------------------------------------------------------
   Form Elements - Teal focus states
   -------------------------------------------------------------------------- */
.contact-form .form-control:focus,
.wizard-card .form-control:focus,
.wizard-card .form-select:focus {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(73, 166, 169, 0.15);
}

.wizard-card .form-check-input:checked {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
}

/* --------------------------------------------------------------------------
   Wizard Progress - Teal (brand identity)
   -------------------------------------------------------------------------- */
.wizard-progress-fill {
  background: linear-gradient(90deg, var(--color-teal) 0%, var(--color-teal-dark) 100%);
}

.wizard-step-link.active {
  color: var(--color-teal-dark);
}

.wizard-step-link.current {
  background: var(--color-rose-light);
  color: var(--color-chocolate);
}

/* --------------------------------------------------------------------------
   Cake Cards & Badges - Teal accent
   -------------------------------------------------------------------------- */
.cake-badge {
  background: var(--color-teal);
}

.cake-price {
  color: var(--color-gold);
}

/* --------------------------------------------------------------------------
   Service Cards - Teal icons
   -------------------------------------------------------------------------- */
.service-icon {
  background: var(--color-cream);
  color: var(--color-teal);
}

.service-link {
  color: var(--color-teal);
}

.service-card:hover .service-link {
  color: var(--color-teal-dark);
}

/* --------------------------------------------------------------------------
   Booking & Expect Cards - Rose warmth
   -------------------------------------------------------------------------- */
.booking-icon,
.expect-icon {
  background: linear-gradient(135deg, var(--color-rose-light) 0%, rgba(247, 209, 107, 0.3) 100%);
  color: var(--color-chocolate);
}

.booking-timing {
  color: var(--color-gold);
}

/* --------------------------------------------------------------------------
   FAQ - Teal accents
   -------------------------------------------------------------------------- */
.faq-icon {
  color: var(--color-teal);
}

.faq-question:hover {
  color: var(--color-teal-dark);
}

/* --------------------------------------------------------------------------
   Testimonials - Rose quote mark
   -------------------------------------------------------------------------- */
.testimonial-card::before {
  color: var(--color-rose-light);
}

.testimonial-avatar {
  background: linear-gradient(135deg, var(--color-rose-light), rgba(247, 209, 107, 0.4));
}

/* --------------------------------------------------------------------------
   Dividers & Decorative Elements - Gold decorative
   -------------------------------------------------------------------------- */
.divider::before,
.divider::after {
  background: var(--color-rose-light);
}

.divider-icon {
  color: var(--color-gold-decorative); /* Decorative use is OK */
}

/* --------------------------------------------------------------------------
   About Page Quote - Rose warmth
   -------------------------------------------------------------------------- */
.about-quote {
  background: linear-gradient(135deg, var(--color-rose-light) 0%, rgba(247, 209, 107, 0.3) 100%);
}

.about-quote::before {
  color: var(--color-rose);
}

/* --------------------------------------------------------------------------
   Staff Portal - Teal accent
   -------------------------------------------------------------------------- */
.sidebar-nav a.active {
  color: var(--color-teal);
  background-color: rgba(73, 166, 169, 0.1);
  border-right-color: var(--color-teal);
}

/* --------------------------------------------------------------------------
   Pricing & Category Pages
   -------------------------------------------------------------------------- */
.pricing-value {
  color: var(--color-gold);
}

.flavor-tag {
  border-color: var(--color-teal);
  color: var(--color-chocolate);
}

.feature-list li::before {
  color: var(--color-teal);
}

/* --------------------------------------------------------------------------
   HTMX States - Teal focus
   -------------------------------------------------------------------------- */
.editable-cell input:focus {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 2px rgba(73, 166, 169, 0.2);
}

/* --------------------------------------------------------------------------
   Optional Badge - Rose
   -------------------------------------------------------------------------- */
.optional-badge {
  background: var(--color-rose-light);
  color: var(--color-chocolate);
}

/* --------------------------------------------------------------------------
   Hero Badge - Teal accent
   -------------------------------------------------------------------------- */
.hero-badge {
  color: var(--color-teal-dark);
}

.hero-badge::before {
  color: var(--color-gold-decorative); /* Star - decorative use OK */
}

/* --------------------------------------------------------------------------
   Section Labels - Teal
   -------------------------------------------------------------------------- */
.section-label {
  color: var(--color-teal);
}

/* --------------------------------------------------------------------------
   WhatsApp Button - Keep green (brand color)
   -------------------------------------------------------------------------- */
.btn-whatsapp {
  background: #25D366;
}

.btn-whatsapp:hover {
  background: #128C7E;
}

/* --------------------------------------------------------------------------
   Chat Button - Gold to match primary buttons
   -------------------------------------------------------------------------- */
.btn-chat {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.btn-chat:hover {
  background: var(--color-cream);
  color: var(--color-chocolate);
  border-color: var(--color-cream);
}