:root {
  /* Green mode palette (eco / corporate) */

  /* Brand greens */
  --brand-900: #052714;
  --brand-800: #07381d;
  --brand-700: #0a4c24;
  --brand-600: #0b5a2a; /* Primary: deep forest green */
  --brand-500: #1f7a4a; /* Softened forest */
  --brand-400: #9bcb2e; /* Accent: fresh lime (sparingly) */

  /* Light-mode neutrals */
  --lm-bg: #f6f8f5;      /* Main background */
  --lm-surface: #e7efe9; /* Cards / secondary background */
  --lm-surface-2: #c9d6ce; /* Borders / subtle UI */
  --lm-text: #2e3a32;    /* Body text */
  --lm-text-muted: #5b6a61;
  --lm-text-strong: #0b5a2a; /* Headings / nav / key accents */

  /* Optional contrast accent for hover/secondary CTAs */
  --brand-olive: #6e8f2a;

  /* Brand-derived tints used by mapped "blue-*" utilities */
  --brand-100: var(--lm-surface);
  --brand-50: var(--lm-bg);

  --brand-600-20: rgba(11, 90, 42, 0.20);
  --brand-500-30: rgba(31, 122, 74, 0.30);
  --brand-shadow-20: rgba(0, 0, 0, 0.12);

  /* Dark UI surfaces in green theme (used for dark sections even in light mode) */
  --surface-950: #0b1410;
  --surface-900: #0e1a13; /* Deep evergreen charcoal */
  --surface-800: #14261c; /* Dark forest surface */
  --surface-700: #24382d; /* Dark sage line */
  --surface-950-40: rgba(14, 26, 19, 0.40);
  --surface-950-30: rgba(14, 26, 19, 0.30);
  --surface-800-50: rgba(20, 38, 28, 0.50);
}

/* --- Remap Tailwind's blue palette to the brand green palette --- */
.bg-blue-600 { background-color: var(--brand-600) !important; }
.bg-blue-700 { background-color: var(--brand-700) !important; }
.bg-blue-50 { background-color: var(--brand-50) !important; }
.bg-blue-100 { background-color: var(--brand-100) !important; }
.bg-blue-600\/20 { background-color: var(--brand-600-20) !important; }

/* --- Brand utility classes (since Tailwind CDN has no custom theme) --- */
.bg-brand-600 { background-color: var(--brand-600) !important; }
.bg-brand-700 { background-color: var(--brand-700) !important; }
.bg-brand-50 { background-color: var(--brand-50) !important; }
.bg-brand-100 { background-color: var(--brand-100) !important; }

.text-brand-900 { color: var(--brand-600) !important; }
.text-brand-700 { color: var(--brand-700) !important; }
.text-brand-600 { color: var(--brand-600) !important; }

.border-brand-600 { border-color: var(--brand-600) !important; }
.border-brand-200 { border-color: var(--lm-surface-2) !important; }

.hover\:bg-brand-700:hover { background-color: var(--brand-700) !important; }
.hover\:text-brand-700:hover { color: var(--brand-700) !important; }

.text-blue-600 { color: var(--brand-600) !important; }
.text-blue-400 { color: var(--brand-400) !important; }

.border-blue-600 { border-color: var(--brand-600) !important; }
.border-blue-500\/30 { border-color: var(--brand-500-30) !important; }
.border-blue-200 { border-color: var(--lm-surface-2) !important; }

.shadow-blue-500\/20 { box-shadow: 0 10px 15px -3px var(--brand-shadow-20), 0 4px 6px -4px var(--brand-shadow-20) !important; }

.hover\:text-blue-600:hover { color: var(--brand-600) !important; }
.hover\:border-blue-500:hover { border-color: var(--brand-500) !important; }
.hover\:border-blue-100:hover { border-color: var(--brand-100) !important; }

.group:hover .group-hover\:text-blue-600 { color: var(--brand-600) !important; }

.nav-item span {
  background-color: var(--brand-600) !important;
}

/* In green mode, use olive highlight for primary button hover */
.hover\:bg-blue-600:hover { background-color: var(--brand-olive) !important; }
.hover\:bg-blue-700:hover { background-color: var(--brand-olive) !important; }

/* Keep hover text readable (covers most buttons/CTAs) */
a.hover\:bg-blue-600:hover,
button.hover\:bg-blue-600:hover,
a.hover\:bg-blue-700:hover,
button.hover\:bg-blue-700:hover {
  color: rgba(246, 248, 245, 0.98) !important;
}

/* --- Job adverts: make the "Susisiekti" CTAs clearly brand-green --- */
#jobs a.bg-slate-900 {
  background-color: var(--brand-600) !important;
}

/* --- Force override slate colors to brand colors --- */
.text-slate-900 { color: var(--brand-600) !important; }
.text-slate-800 { color: var(--brand-600) !important; }
.text-slate-700 { color: var(--brand-600) !important; }
.text-slate-600 { color: var(--brand-600) !important; }
.text-slate-500 { color: var(--brand-600) !important; }
.hover\:text-slate-900:hover { color: var(--brand-600) !important; }
.bg-slate-900 { background-color: var(--brand-600) !important; }

.feature-card {
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.28s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  background-color: var(--lm-surface) !important;
  box-shadow: 0 20px 25px -5px var(--brand-shadow-20), 0 8px 10px -6px rgba(0,0,0,0.05);
  border-color: var(--lm-surface-2) !important;
}

.section-pad {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.section-pad-sm {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-title {
  font-size: clamp(1.875rem, 1.5rem + 1vw, 2.25rem);
  font-weight: 700;
  color: var(--brand-600);
}

.section-title-lg {
  font-size: clamp(2.25rem, 1.75rem + 1.2vw, 3rem);
  font-weight: 800;
  color: var(--brand-600);
}

.section-title-invert {
  color: #ffffff;
}

.section-subtitle {
  font-size: 1.125rem;
  line-height: 1.75rem;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.section-subtitle-invert {
  color: #ffffff;
}

.hero-subtitle {
  text-transform: uppercase;
  font-size: 24pt;
  line-height: 1.15;
}