:root {
  --primary:        #16a34a;
  --primary-dark:   #15803d;
  --primary-darker: #14532d;
  --primary-light:  #f0fdf4;
  --primary-tint:   #dcfce7;
  --accent:        #f59e0b;
  --accent-dark:   #d97706;
  --heading:       #0f172a;
  --body:          #475569;
  --forest-tint:      #376f57;
  --tan-text:      #f8f1dc;
  --bg-subtle:     #f2f7f3;
  --border:        #e2e8f0;
  --white:         #ffffff;
  --danger:        #dc2626;
  --danger-dark:   #b91c1c;
  --danger-surface: #fef2f2;   
  --danger-tint:   #fecaca;    
  --danger-ink:    #7f1d1d;    
  --footer-bg:     #0f172a;
  --footer-text:   #94a3b8;
  --font:          'Hanken Grotesk', Arial, Helvetica, sans-serif;
  --radius:        10px;
  --shadow:        0 4px 20px rgba(0, 0, 0, 0.07);
  --shadow-lg:     0 8px 36px rgba(0, 0, 0, 0.12);

  --footer-divider: rgba(255, 255, 255, 0.07);
  --on-forest:      var(--white);      
  --on-footer-strong: var(--white);    
  --footer-chevron: #86efac;           
  --nav-bg:         rgba(240, 253, 244, 0.96);   
  --surface:        #f0fdf4;
  --section-mint:   #c5dccd;
  --footer-link:      var(--primary);
  --footer-link-hover: #4ade80;
  --footer-dev:       var(--primary);  
  --on-forest-strong: var(--white);
  --on-forest-icon:   #86efac;
  --on-forest-rule:   rgba(255, 255, 255, 0.18);
  --on-forest-chip:   rgba(255, 255, 255, 0.15);
  --on-forest-chip-hover: rgba(255, 255, 255, 0.25);
}



:root[data-theme="light"] {
  --forest-tint:      #eef7f1;
  --tan-text:         #14532d;
  --footer-bg:        #f1f5f9;
  --footer-text:      #475569;
  --bg-subtle:        #f8fafc;

  --footer-divider:   rgba(15, 23, 42, 0.10);
  --on-forest:        var(--primary-darker);
  --on-footer-strong: var(--heading);
  --footer-chevron:   var(--primary-darker);
  --nav-bg:           rgba(255, 255, 255, 0.96);
  --surface:          var(--white);
  --section-mint:     var(--surface);
  --footer-link:      var(--primary-dark);
  --footer-link-hover: var(--primary-darker);
  --footer-dev:       var(--primary-dark);
  --on-forest-strong: var(--heading);
  --on-forest-icon:   var(--primary-dark);
  --on-forest-rule:   rgba(15, 23, 42, 0.12);
  --on-forest-chip:   rgba(15, 23, 42, 0.06);
  --on-forest-chip-hover: rgba(15, 23, 42, 0.12);

  --shadow:           0 4px 20px rgba(15, 23, 42, 0.06);
  --shadow-lg:        0 8px 36px rgba(15, 23, 42, 0.10);
}


:root {
  --hero-heading: var(--white);
  --hero-tagline: #86efac;
  --hero-body:    #86efac;
}
:root[data-theme="light"] {
  --hero-heading: var(--heading);
  --hero-tagline: var(--primary-dark);
  --hero-body:    var(--body);
}


:root { --card-on-light: var(--primary-light); }