/* ==========================================================
   Classic — Light Cream & Burnished Gold
   Personality: Luxury industrial, light-mode, editorial weight
   Typography: DM Serif Display + Barlow Condensed (default)
   Palette: Warm cream backgrounds, ink navy text, gold accents
   ========================================================== */
:root {
  /* Backgrounds — warm cream light palette */
  --color-primary:        #1a2640;
  --color-primary-deep:   #ffffff;
  --color-primary-light:  #2c3e5c;
  --color-on-primary:     #1a2640;
  --color-surface:        #f9f6f1;
  --color-border:         #e8e0d4;

  /* Accents — burnished gold */
  --color-accent:         #b8832a;
  --color-accent-light:   #d4a04e;
  --color-accent-dim:     #7a5418;
  --color-muted:          #8a8070;

  /* Brand fog — used in navbar on dark bg is now reversed */
  --color-brand-surface:  #f9f6f1;
  --color-brand-border:   #e8e0d4;
  --color-brand-fog:      #4a5568;
  --color-brand-fog-dim:  #8a8070;
  --color-brand-white:    #1a2640;

  /* Navbar — light white bar */
  .navbar {
    background-color: #ffffff;
    border-bottom: 1px solid #e8e0d4;
    box-shadow: 0 1px 12px rgba(26, 38, 64, 0.06);

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

  .navbar-logo-wordmark {
    color: #1a2640;
    span { color: #b8832a; }
  }

  .nav-link {
    color: #4a5568;
    &::after { background: #b8832a; }
    &:hover { color: #1a2640; }
  }

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

  .lang-btn {
    border-color: rgba(184, 131, 42, 0.3);
    color: #6b7280;
    &:hover { background: rgba(184, 131, 42, 0.08); border-color: #b8832a; color: #b8832a; }
  }

  .lang-btn-active {
    background: #b8832a;
    border-color: #b8832a;
    color: #ffffff;
  }

  .theme-btn {
    border-color: rgba(26, 38, 64, 0.15);
    color: #6b7280;
    &:hover { border-color: rgba(184, 131, 42, 0.4); color: #4a5568; }
  }

  .theme-btn-active {
    background: rgba(184, 131, 42, 0.1);
    border-color: rgba(184, 131, 42, 0.45);
    color: #b8832a;
  }

  .nav-mobile-btn {
    border-color: rgba(26, 38, 64, 0.15);
    color: #4a5568;
    &:hover { background: rgba(184, 131, 42, 0.06); color: #b8832a; }
  }

  .nav-mobile-panel {
    background-color: #ffffff;
    border-top-color: #e8e0d4;
  }

  .nav-mobile-link {
    color: #4a5568;
    border-left-color: transparent;
    &:hover { color: #1a2640; border-left-color: #b8832a; background: rgba(184, 131, 42, 0.05); }
  }

  /* Hero — light with a strong graphic element */
  .hero {
    background-color: #f2ede4;
    background-image:
      radial-gradient(ellipse 80% 60% at 70% 50%, rgba(184, 131, 42, 0.08) 0%, transparent 70%),
      linear-gradient(rgba(26, 38, 64, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(26, 38, 64, 0.03) 1px, transparent 1px);
    background-size: auto, 60px 60px, 60px 60px;
  }

  .hero-heading { color: #1a2640; }
  .hero-sub { color: #4a5568; }

  .hero-badge {
    color: #b8832a;
    border-color: rgba(184, 131, 42, 0.4);
    background: rgba(184, 131, 42, 0.07);
  }

  .hero-rail {
    background: linear-gradient(to bottom, transparent, rgba(184, 131, 42, 0.35) 20%, rgba(184, 131, 42, 0.35) 80%, transparent);
  }

  .btn-outline-light {
    border-color: rgba(26, 38, 64, 0.35);
    color: #1a2640;
    &:hover { background: rgba(26, 38, 64, 0.05); border-color: #1a2640; }
  }

  /* Sections */
  .section-white { background-color: #ffffff; }
  .section-light { background-color: #f9f6f1; }

  .section-ruled {
    background-color: #f9f6f1;
    background-image:
      linear-gradient(#e8e0d4 1px, transparent 1px),
      linear-gradient(90deg, #e8e0d4 1px, transparent 1px);
  }

  /* Section heading rail */
  .section-heading::before {
    background: linear-gradient(to bottom, #b8832a 0%, #7a5418 100%);
  }

  .section-heading-center::after {
    background: linear-gradient(to right, #b8832a, #7a5418);
  }

  /* Cards */
  .feature-card {
    background: #ffffff;
    border-color: #e8e0d4;
    &::after { background: #b8832a; }
  }

  .feature-card-icon {
    background: #f9f6f1;
    border-color: #e8e0d4;
    color: #b8832a;
    .feature-card:hover & { background: #b8832a; border-color: #b8832a; color: #fff; }
  }

  .why-card { background: #ffffff; border-color: #e8e0d4; }

  .product-card { background: #ffffff; border-color: #e8e0d4; }
  .product-card-body { border-top-color: #b8832a; }
  .product-card-thumb { background-color: #1a2640; }

  .pillar-card { background: #ffffff; border-color: #e8e0d4; }
  .pillar-icon { background: #f9f6f1; border-color: #e8e0d4; color: #b8832a; }

  .info-card { background: #ffffff; border-color: #e8e0d4; }
  .info-card-icon { background: #f9f6f1; border-color: #e8e0d4; color: #b8832a; }

  /* Stats */
  .stats-strip {
    background-color: #1a2640;
    border-top-color: rgba(184, 131, 42, 0.2);
    border-bottom-color: rgba(184, 131, 42, 0.2);
  }

  .stat-item + .stat-item::before { background: rgba(184, 131, 42, 0.25); }

  /* CTA */
  .cta-section { background-color: #1a2640; }

  /* Form */
  .form-card { border-top-color: #b8832a; background: #ffffff; border-color: #e8e0d4; }
  .form-input {
    background: #f9f6f1;
    border-color: #e8e0d4;
    &:focus { border-color: #b8832a; box-shadow: 0 0 0 3px rgba(184, 131, 42, 0.12); }
  }

  /* Legal block */
  .legal-block { background: #ffffff; border-color: #e8e0d4; }

/* Footer */
.site-footer {
background-color: #e8e0d4;
border-top-color: rgba(184, 131, 42, 0.25);
}

.footer-brand-name { color: #1a2640; }
.footer-tagline { color: #4a5568; }
.footer-section-title { color: #b8832a; border-bottom-color: rgba(184, 131, 42, 0.25); }
.footer-link { color: #4a5568; &:hover { color: #1a2640; } }
.footer-bottom { border-top-color: rgba(184, 131, 42, 0.2); color: #6b7280; }
.whatsapp-float { background-color: #b8832a; &:hover { background-color: #d4a04e; } }
.whatsapp-float svg { fill: #ffffff; }
.call-float { background-color: #1a2640; &:hover { background-color: #2c3e5c; } }
.call-float svg { color: #ffffff; }
.page-header {
    background-color: #f2ede4;
    background-image:
      radial-gradient(ellipse 80% 60% at 70% 50%, rgba(184, 131, 42, 0.08) 0%, transparent 70%),
      linear-gradient(rgba(26, 38, 64, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(26, 38, 64, 0.03) 1px, transparent 1px);
    background-size: auto, 60px 60px, 60px 60px;
  }

  .heading-display { color: #1a2640; }
  .heading-display-light { color: #1a2640; }
  .eyebrow { color: #b8832a; }
  .eyebrow-light { color: #b8832a; }
}