/* ===========================================
   THEME A — FOREST & SAFFRON
   Earthy · stable · traditional Indian palette
   =========================================== */

:root {
  --bg: #FFFFFF;
  --bg-alt: #F4F1EA;
  --footer-bg: #0F2E25;
  --primary: #1A4D3E;
  --primary-hover: #0F2E25;
  --primary-soft: rgba(26,77,62,.10);
  --accent: #E4B43B;
  --accent-hover: #C99A2D;
  --ink: #1A1A1A;
  --mute: #6B6B6B;
  --line: #E5E2D9;
  --wa: #22A45D;

  --radius-card: 12px;
  --radius-btn: 10px;
  --radius-sharp: 6px;
  --case-headline: none;
  --case-eyebrow: uppercase;
  --case-btn: none;
  --case-brand: none;
  --weight-btn: 600;
  --tracking-btn: 0;
  --weight-display: 700;
  --tracking-display: -0.02em;

  --font-display: 'Manrope', 'Inter', sans-serif;
  --btn-primary-text: #1A1A1A;
  --hero-text: #FFFFFF;
  --hero-bg: linear-gradient(135deg, #1A4D3E 0%, #2A6E5D 60%, #3F8870 100%);
}

/* Theme-specific touches */
.eyebrow { color: var(--primary); }
.service-icon { background: rgba(26,77,62,.10); }
.btn-primary { box-shadow: 0 8px 20px -8px rgba(228,180,59,.55); }

/* Surfaces that must stay dark in both modes */
:root {
  --nav-bg: rgba(255,255,255,.94);
  --surface-deep: #0F2E25;          /* deep forest — payment band, final CTA */
  --surface-deep-text: #FFFFFF;
  --shadow-color: 0,0,0;
}

/* ===========================================
   DARK MODE — Forest & Saffron
   Warm dark surface, lighter forest, saffron pop
   =========================================== */
[data-theme="dark"] {
  --bg: #0F1411;
  --bg-alt: #181E1A;
  --footer-bg: #050807;
  --primary: #5FAB8E;               /* lighter forest for contrast on dark */
  --primary-hover: #7FC4A8;
  --primary-soft: rgba(95,171,142,.14);
  --accent: #EFC156;                /* slightly brighter saffron pops on dark */
  --accent-hover: #D9A93D;
  --ink: #F0EDE5;
  --mute: #A8A39A;
  --line: #2A2F2B;
  --nav-bg: rgba(15,20,17,.92);
  --btn-primary-text: #1A1A1A;      /* dark text on saffron stays */
  --shadow-color: 0,0,0;
}

/* Dark-mode-specific adjustments */
[data-theme="dark"] .service-icon {
  background: rgba(95,171,142,.16);
  color: var(--primary);
}
[data-theme="dark"] .service-card:hover {
  box-shadow: 0 18px 36px -14px rgba(0,0,0,.55);
}
[data-theme="dark"] .project-card:hover,
[data-theme="dark"] .tier:hover,
[data-theme="dark"] .card:hover {
  box-shadow: 0 18px 36px -14px rgba(0,0,0,.55);
}
[data-theme="dark"] .stats { background: var(--bg); }
[data-theme="dark"] .btn-primary { box-shadow: 0 8px 24px -8px rgba(239,193,86,.40); }
[data-theme="dark"] .btn-secondary:hover { color: var(--bg); }

/* Hero gradient stays the same in both modes (always dark forest backdrop) */
[data-theme="dark"] .hero-overlay {
  background: linear-gradient(135deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.55) 100%);
}

/* Project card decorative gradients — anchor to deep forest in dark mode so they don't wash out */
[data-theme="dark"] .project-img { background: linear-gradient(135deg, #1A4D3E 0%, var(--accent) 140%); }
[data-theme="dark"] .project-card:nth-child(3) .project-img { background: linear-gradient(135deg, #1A4D3E 0%, #8FB374 130%); }
[data-theme="dark"] .project-card:nth-child(5) .project-img { background: linear-gradient(135deg, #1A4D3E 0%, #BB8462 130%); }

/* Drawer + tier featured highlight in dark */
[data-theme="dark"] .drawer { background: var(--bg-alt); }
[data-theme="dark"] .tier.featured { box-shadow: 0 0 0 1px var(--accent), 0 12px 28px -12px rgba(239,193,86,.20); }