/* ==========================================================
   Emerald — Pure White & Forest Green
   Personality: Editorial magazine, clean Swiss grid, nature-forward
   Typography: Playfair Display (display) + Josefin Sans (UI)
   Palette: Bright white, deep forest green, soft sage tints
   ========================================================== */
:root {
  --color-primary:        #1a3a2a;
  --color-primary-deep:   #ffffff;
  --color-primary-light:  #2d5c42;
  --color-on-primary:     #1a3a2a;
  --color-surface:        #f4f8f5;
  --color-border:         #d4e4d8;
  --color-accent:         #2d7a52;
  --color-accent-light:   #4a9e70;
  --color-accent-dim:     #1a5038;
  --color-muted:          #7a9a84;
  --color-brand-surface:  #f4f8f5;
  --color-brand-border:   #d4e4d8;
  --color-brand-fog:      #4a6854;
  --color-brand-fog-dim:  #7a9a84;
  --color-brand-white:    #1a3a2a;

  /* Override display font — Playfair Display for editorial feel */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-sans:    'Josefin Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Josefin Sans', ui-sans-serif, system-ui, sans-serif;

  /* Navbar — bright white bar with green accent */
  .navbar {
    background-color: #ffffff;
    border-bottom: 1px solid #d4e4d8;
    box-shadow: 0 1px 12px rgba(26, 58, 42, 0.07);

    &::before {
      background: linear-gradient(to right, transparent, #2d7a52 25%, #4a9e70 50%, #2d7a52 75%, transparent);
    }
  }

  .navbar-logo-wordmark {
    color: #1a3a2a;
    span { color: #2d7a52; }
  }

  .nav-link {
    color: #4a6854;
    letter-spacing: 0.08em;
    &::after { background: #2d7a52; }
    &:hover { color: #1a3a2a; }
  }

  .nav-link-active { color: #2d7a52; }

  .lang-btn {
    border-color: rgba(45, 122, 82, 0.3);
    color: #6b8070;
    border-radius: 2px;
    &:hover { background: rgba(45, 122, 82, 0.07); border-color: #2d7a52; color: #2d7a52; }
  }

  .lang-btn-active { background: #2d7a52; border-color: #2d7a52; color: #fff; }

  .theme-btn {
    border-color: rgba(26, 58, 42, 0.15);
    color: #7a9a84;
    &:hover { border-color: rgba(45, 122, 82, 0.4); color: #4a6854; }
  }

  .theme-btn-active {
    background: rgba(45, 122, 82, 0.08);
    border-color: rgba(45, 122, 82, 0.4);
    color: #2d7a52;
  }

  .nav-mobile-btn { border-color: rgba(26, 58, 42, 0.15); color: #4a6854; }
  .nav-mobile-panel { background-color: #ffffff; border-top-color: #d4e4d8; }
  .nav-mobile-link { color: #4a6854; &:hover { color: #1a3a2a; border-left-color: #2d7a52; background: rgba(45, 122, 82, 0.04); } }

  /* Hero — editorial: white bg, full-width type, green stripe */
  .hero {
    background-color: #ffffff;
    background-image:
      linear-gradient(rgba(45, 122, 82, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(45, 122, 82, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    border-bottom: 3px solid #2d7a52;
  }

  .hero-heading {
    color: #1a3a2a;
    font-style: italic;
    letter-spacing: -0.02em;
  }

  .hero-sub { color: #4a6854; }

  .hero-badge {
    color: #2d7a52;
    border-color: rgba(45, 122, 82, 0.4);
    background: rgba(45, 122, 82, 0.06);
  }

  .hero-rail {
    background: linear-gradient(to bottom, transparent, rgba(45, 122, 82, 0.35) 20%, rgba(45, 122, 82, 0.35) 80%, transparent);
  }

  .btn-primary {
    background-color: #2d7a52;
    color: #ffffff;
    box-shadow: 0 2px 12px rgba(45, 122, 82, 0.22);
    border-radius: 2px;
    &:hover { background-color: #4a9e70; box-shadow: 0 4px 18px rgba(45, 122, 82, 0.3); }
  }

  .btn-outline-light {
    border-color: rgba(26, 58, 42, 0.4);
    color: #1a3a2a;
    border-radius: 2px;
    &:hover { background: rgba(45, 122, 82, 0.06); border-color: #2d7a52; }
  }

  .btn-outline { border-color: #2d7a52; color: #2d7a52; border-radius: 2px; &:hover { background: rgba(45, 122, 82, 0.06); } }

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

  .section-heading::before { background: linear-gradient(to bottom, #2d7a52, #1a5038); }
  .section-heading-center::after { background: linear-gradient(to right, #2d7a52, #1a5038); }

  .feature-card { background: #ffffff; border-color: #d4e4d8; border-radius: 2px; &::after { background: #2d7a52; } }
  .feature-card-icon { background: #f4f8f5; border-color: #d4e4d8; color: #2d7a52; .feature-card:hover & { background: #2d7a52; border-color: #2d7a52; color: #fff; } }

  .why-card { background: #ffffff; border-color: #d4e4d8; border-radius: 2px; }
  .product-card { background: #ffffff; border-color: #d4e4d8; border-radius: 2px; }
  .product-card-body { border-top-color: #2d7a52; }
  .product-card-thumb { background-color: #1a3a2a; }

  .pillar-card { background: #ffffff; border-color: #d4e4d8; border-radius: 2px; }
  .pillar-icon { background: #f4f8f5; border-color: #d4e4d8; color: #2d7a52; }

  .info-card { background: #ffffff; border-color: #d4e4d8; border-radius: 2px; &:hover { border-color: #2d7a52; } }
  .info-card-icon { background: #f4f8f5; border-color: #d4e4d8; color: #2d7a52; }

  .stats-strip { background-color: #1a3a2a; border-top-color: rgba(45, 122, 82, 0.25); border-bottom-color: rgba(45, 122, 82, 0.25); }
  .stat-item + .stat-item::before { background: rgba(45, 122, 82, 0.3); }
  .stat-number { color: #7ecba0; }

  .cta-section { background-color: #1a3a2a; }
  .cta-section::before { background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(45, 122, 82, 0.15) 0%, transparent 70%); }

  .form-card { background: #ffffff; border-color: #d4e4d8; border-top-color: #2d7a52; border-radius: 2px; }
  .form-input { background: #f4f8f5; border-color: #d4e4d8; &:focus { border-color: #2d7a52; box-shadow: 0 0 0 3px rgba(45, 122, 82, 0.1); } }

  .legal-block { background: #ffffff; border-color: #d4e4d8; }

.site-footer { background-color: #d4e4d8; border-top-color: rgba(45, 122, 82, 0.25); }
.footer-brand-name { color: #1a3a2a; }
.footer-tagline { color: #4a6854; }
.footer-section-title { color: #2d7a52; border-bottom-color: rgba(45, 122, 82, 0.25); }
.footer-link { color: #4a6854; &:hover { color: #1a3a2a; } }
.footer-bottom { border-top-color: rgba(45, 122, 82, 0.2); color: #5a7a64; }
.whatsapp-float svg { fill: #ffffff; }
.call-float { background-color: #1a3a2a; &:hover { background-color: #2d5c42; } }
.call-float svg { color: #ffffff; }

.page-header {
    background-color: #ffffff;
    background-image:
      linear-gradient(rgba(45, 122, 82, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(45, 122, 82, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    border-bottom: 3px solid #2d7a52;
  }

  .heading-display { color: #1a3a2a; }
  .heading-display-light { color: #1a3a2a; }
  .eyebrow { color: #2d7a52; }
  .eyebrow-light { color: #2d7a52; }
}