/* ==========================================================
   Rouge — Blush White & Deep Rose
   Personality: Boutique luxury, hospitality, feminine precision
   Typography: Cormorant Garamond (display) + Barlow (UI)
   Palette: Warm white, dusty rose, deep burgundy ink
   ========================================================== */
:root {
  --color-primary:        #3a1a24;
  --color-primary-deep:   #ffffff;
  --color-primary-light:  #5c2a38;
  --color-on-primary:     #3a1a24;
  --color-surface:        #fdf6f7;
  --color-border:         #ead8dc;
  --color-accent:         #b84060;
  --color-accent-light:   #d4607e;
  --color-accent-dim:     #7a2040;
  --color-muted:          #9a7a82;
  --color-brand-surface:  #fdf6f7;
  --color-brand-border:   #ead8dc;
  --color-brand-fog:      #6a4a52;
  --color-brand-fog-dim:  #9a7a82;
  --color-brand-white:    #3a1a24;

  /* Override to Cormorant Garamond — refined, haute couture */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-sans:    'Barlow', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Barlow', ui-sans-serif, system-ui, sans-serif;

  /* Navbar — ivory white with rose accent */
  .navbar {
    background-color: #ffffff;
    border-bottom: 1px solid #ead8dc;
    box-shadow: 0 1px 16px rgba(58, 26, 36, 0.07);

    &::before {
      background: linear-gradient(to right, transparent, #b84060 25%, #d4607e 50%, #b84060 75%, transparent);
    }
  }

  .navbar-logo-wordmark {
    color: #3a1a24;
    span { color: #b84060; }
  }

  .nav-link {
    color: #6a4a52;
    &::after { background: #b84060; }
    &:hover { color: #3a1a24; }
  }

  .nav-link-active { color: #b84060; }

  .lang-btn {
    border-color: rgba(184, 64, 96, 0.28);
    color: #7a6068;
    border-radius: 20px;
    &:hover { background: rgba(184, 64, 96, 0.07); border-color: #b84060; color: #b84060; }
  }

  .lang-btn-active { background: #b84060; border-color: #b84060; color: #fff; border-radius: 20px; }

  .theme-btn {
    border-color: rgba(58, 26, 36, 0.14);
    color: #9a7a82;
    border-radius: 20px;
    &:hover { border-color: rgba(184, 64, 96, 0.35); color: #6a4a52; }
  }

  .theme-btn-active { background: rgba(184, 64, 96, 0.08); border-color: rgba(184, 64, 96, 0.4); color: #b84060; border-radius: 20px; }

  .nav-mobile-btn { border-color: rgba(58, 26, 36, 0.15); color: #6a4a52; border-radius: 20px; }
  .nav-mobile-panel { background-color: #ffffff; border-top-color: #ead8dc; }
  .nav-mobile-link { color: #6a4a52; &:hover { color: #3a1a24; border-left-color: #b84060; background: rgba(184, 64, 96, 0.04); } }

  /* Hero — soft blush with large italic display type */
  .hero {
    background-color: #fdf0f2;
    background-image:
      radial-gradient(ellipse 75% 60% at 65% 50%, rgba(184, 64, 96, 0.07) 0%, transparent 65%);
    border-bottom: 2px solid #ead8dc;
  }

  .hero-heading {
    color: #3a1a24;
    font-size: clamp(2.8rem, 6vw, 5.5rem);
    font-style: italic;
    letter-spacing: -0.015em;
    font-weight: 400;
  }

  .hero-sub { color: #6a4a52; }

  .hero-badge {
    color: #b84060;
    border-color: rgba(184, 64, 96, 0.38);
    background: rgba(184, 64, 96, 0.06);
    border-radius: 20px;
  }

  .hero-rail {
    background: linear-gradient(to bottom, transparent, rgba(184, 64, 96, 0.3) 20%, rgba(184, 64, 96, 0.3) 80%, transparent);
  }

  .btn-primary {
    background-color: #b84060;
    color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(184, 64, 96, 0.22);
    &:hover { background-color: #d4607e; box-shadow: 0 4px 18px rgba(184, 64, 96, 0.3); }
  }

  .btn-outline-light {
    border-color: rgba(58, 26, 36, 0.38);
    color: #3a1a24;
    border-radius: 20px;
    &:hover { background: rgba(184, 64, 96, 0.06); border-color: #b84060; }
  }

  .btn-outline { border-color: #b84060; color: #b84060; border-radius: 20px; &:hover { background: rgba(184, 64, 96, 0.05); } }
  .btn-whatsapp { border-radius: 20px; }

  .section-white { background-color: #ffffff; }
  .section-light { background-color: #fdf6f7; }
  .section-ruled {
    background-color: #fdf6f7;
    background-image: linear-gradient(#ead8dc 1px, transparent 1px), linear-gradient(90deg, #ead8dc 1px, transparent 1px);
  }

  .section-heading::before { background: linear-gradient(to bottom, #b84060, #7a2040); }
  .section-heading-center::after { background: linear-gradient(to right, #b84060, #7a2040); }

  .feature-card { background: #ffffff; border-color: #ead8dc; border-radius: 12px; &::after { background: #b84060; border-radius: 0 0 12px 12px; } }
  .feature-card-icon { background: #fdf6f7; border-color: #ead8dc; color: #b84060; border-radius: 12px; .feature-card:hover & { background: #b84060; border-color: #b84060; color: #fff; border-radius: 12px; } }
  .feature-card-title { color: #3a1a24; }

  .why-card { background: #ffffff; border-color: #ead8dc; border-radius: 12px; }
  .product-card { background: #ffffff; border-color: #ead8dc; border-radius: 12px; }
  .product-card-body { border-top-color: #b84060; }
  .product-card-thumb { background-color: #3a1a24; }

  .pillar-card { background: #ffffff; border-color: #ead8dc; border-radius: 12px; }
  .pillar-icon { background: #fdf6f7; border-color: #ead8dc; color: #b84060; border-radius: 12px; }

  .info-card { background: #ffffff; border-color: #ead8dc; border-radius: 12px; &:hover { border-color: #b84060; } }
  .info-card-icon { background: #fdf6f7; border-color: #ead8dc; color: #b84060; border-radius: 12px; }

  .stats-strip { background-color: #3a1a24; border-top-color: rgba(184, 64, 96, 0.22); border-bottom-color: rgba(184, 64, 96, 0.22); }
  .stat-item + .stat-item::before { background: rgba(184, 64, 96, 0.28); }
  .stat-number { color: #f4a0b8; }

  .cta-section { background-color: #3a1a24; }
  .cta-section::before { background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(184, 64, 96, 0.12) 0%, transparent 70%); }

  .form-card { background: #ffffff; border-color: #ead8dc; border-top-color: #b84060; border-radius: 12px; }
  .form-input { background: #fdf6f7; border-color: #ead8dc; border-radius: 8px; &:focus { border-color: #b84060; box-shadow: 0 0 0 3px rgba(184, 64, 96, 0.1); } }

  .legal-block { background: #ffffff; border-color: #ead8dc; border-radius: 12px; }

.site-footer { background-color: #ead8dc; border-top-color: rgba(184, 64, 96, 0.25); }
.footer-brand-name { color: #3a1a24; }
.footer-tagline { color: #6a4a52; }
.footer-section-title { color: #b84060; border-bottom-color: rgba(184, 64, 96, 0.25); }
.footer-link { color: #6a4a52; &:hover { color: #3a1a24; } }
.footer-bottom { border-top-color: rgba(184, 64, 96, 0.2); color: #7a6068; }
.whatsapp-float svg { fill: #ffffff; }
.call-float { background-color: #3a1a24; &:hover { background-color: #5c2a38; } }
.call-float svg { color: #ffffff; }
.whatsapp-float { border-radius: 12px; }
.call-float { border-radius: 12px; }

.page-header {
    background-color: #fdf0f2;
    background-image:
      radial-gradient(ellipse 75% 60% at 65% 50%, rgba(184, 64, 96, 0.07) 0%, transparent 65%);
    border-bottom: 2px solid #ead8dc;
  }

  .heading-display { color: #3a1a24; }
  .heading-display-light { color: #3a1a24; }
  .eyebrow { color: #b84060; }
  .eyebrow-light { color: #b84060; }
}

  .heading-display { color: #3a1a24; }
  .heading-display-light { color: #fdf6f7; }
  .eyebrow { color: #b84060; }
  .eyebrow-light { color: #f4a0b8; }

  .whatsapp-float { border-radius: 12px; }
}