/* =========================================================
   GLOBAL COLORS
========================================================= */

:root {
  /* Brand */

  --color-primary: #42a100;
  --color-primary-hover: #1d8f00;
  --color-accent: #f26500;
  --color-accent-hover: #e05e00;
  --color-secondary: #1b613e;

  /* Base */
  --color-background: #ffffff;
  --site-background: #ffffff;
  --color-text: #114a3f;
  --color-text-soft: rgba(17, 74, 63, 0.8);
  --color-white: #ffffff;

  /* Links */
  --color-link: #114a3f;
  --color-link-hover: #178700;
}

/* =========================================================
   SURFACE COLORS
========================================================= */

:root {
  --color-muted-bg: #eef2f2;
  --color-primary-soft: #f3fdec;
  --color-primary-alpha: rgba(75, 179, 0, 0.25);
  --color-icon-bg: #b6e298;
}

/* =========================================================
   BORDERS & DIVIDERS
========================================================= */

:root {
  --color-border-soft: rgba(0, 0, 0, 0.04);
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-dark: rgba(0, 0, 0, 0.2);
  --color-divider: rgba(0, 0, 0, 0.08);
}

/* =========================================================
   SHADOWS & OVERLAYS
========================================================= */

:root {
  --color-shadow-soft:
    0 2px 8px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
  --color-shadow-strong: rgba(0, 0, 0, 0.1);
  --color-overlay-faq: rgba(0, 0, 0, 0.02);
  --color-overlay: rgba(0, 0, 0, 0.4);
}

/* =========================================================
   ICON COLORS
========================================================= */

:root {
  --color-star: #f7b900;
  --icon-trust-background: #42a100;
  --icon-trust-check: #ffffff;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

:root {
  /* ----------------- FONT FAMILIES ----------------- */

  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display-alt: 'IBM Plex Serif', serif;

  /* ----------------- HEADING FONT ROLES ----------------- */

  --h1-font-family: var(--font-display);
  --h2-font-family: var(--font-heading);
  --h3-font-family: var(--font-heading);

  /* ----------------- FONT WEIGHTS ----------------- */

  --h1-font-weight: 600;
  --h1-sub-font-weight: 400;
  --h2-font-weight: 600;
  --h3-font-weight: 600;

  /* ----------------- GLOBAL H1 ----------------- */

  --h1-size-mobile: 34px;
  --h1-size-fluid: 5vw;
  --h1-size-desktop: 52px;
  --h1-line-height: 1.1;
  --h1-letter-spacing: 0px;
  --h1-max-width: 15ch;

  /* ----------------- HOME H1 ----------------- */

  --home-h1-size-mobile: 38px;
  --home-h1-size-fluid: 5.5vw;
  --home-h1-size-desktop: 60px;
  --home-h1-max-width: 15ch;
}

/* =========================================================
   LAYOUT
========================================================= */

:root {
  --container-width: 1360px;
  --layout-gap: 80px;
  --content-offset: 100px;
}

/* =========================================================
   SPACING
========================================================= */

:root {
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 40px;
  --space-xl: 60px;

  --space-section-mobile: 60px;
  --space-section: 100px;
  --space-section-wide: 140px;
  --space-section-compact-mobile: 0px;
  --space-section-compact: 0px;
}

/* =========================================================
   RADII
========================================================= */

:root {
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  --radius-surface: 20px;
  --radius-card: 20px;
  --radius-media: 20px;
  --radius-button: 999px;
  --radius-form: 8px;
}

/* =========================================================
   MOTION
========================================================= */

:root {
  --transition-fast: 0.2s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.3s ease;
}

/* =========================================================
   HEADER
========================================================= */

:root {
  --header-background: #ffffff;
  --header-shadow: rgba(0, 0, 0, 0.06);
  --header-logo-height: 40px;
  --header-logo-height-mobile: 34px;
  --header-height: 90px;
  --header-height-mobile: 90px;
  --mobile-menu-background: #ffffff;
  --menu-toggle-background: #ffffff;
  --menu-toggle-icon: #114a3f;
  --menu-close-background: #ffffff;
  --menu-close-icon: #114a3f;
  --mobile-bar-background: #ffffff;
}

/* =========================================================
   BUTTONS
========================================================= */

:root {
  --button-border-width: 2px;

  /* ----------------- PRIMARY ----------------- */

  --button-primary-background: #f26500;
  --button-primary-background-hover: #e05e00;
  --button-primary-text: #ffffff;
  --button-primary-text-hover: #ffffff;
  --button-primary-border: #f26500;
  --button-primary-border-hover: #e05e00;

  /* ----------------- SECONDARY ----------------- */

  --button-secondary-background: #42a100;
  --button-secondary-background-hover: #1d8f00;
  --button-secondary-text: #ffffff;
  --button-secondary-text-hover: #ffffff;
  --button-secondary-border: #42a100;
  --button-secondary-border-hover: #1d8f00;

  /* ----------------- SUBTLE ----------------- */

  --button-subtle-background: #ffffff;
  --button-subtle-background-hover: #f5fde9;
  --button-subtle-text: #1d8f00;
  --button-subtle-text-hover: #1d8f00;
  --button-subtle-border: #42a100;
  --button-subtle-border-hover: #1d8f00;

  /* ----------------- FINAL CTA PRIMARY ----------------- */

  --button-final-cta-primary-background: #f26500;
  --button-final-cta-primary-background-hover: #e05e00;
  --button-final-cta-primary-text: #ffffff;
  --button-final-cta-primary-text-hover: #ffffff;
  --button-final-cta-primary-border: #f26500;
  --button-final-cta-primary-border-hover: #e05e00;

  /* ----------------- NAVBAR PRIMARY ----------------- */

  --button-navbar-primary-background: #42a100;
  --button-navbar-primary-background-hover: #1d8f00;
  --button-navbar-primary-text: #ffffff;
  --button-navbar-primary-text-hover: #ffffff;
  --button-navbar-primary-border: #42a100;
  --button-navbar-primary-border-hover: #1d8f00;

  /* ----------------- NAVBAR PRIMARY ----------------- */

  --button-hover-transform: translateY(-2px);

  /* ----------------- MOBILE BAR ----------------- */

  --button-mobile-primary-background: #42a100;
  --button-mobile-primary-background-hover: #0D3B33;
  --button-mobile-primary-text: #ffffff;
  --button-mobile-primary-text-hover: #ffffff;
  --button-mobile-primary-border: #42a100;
  --button-mobile-primary-border-hover: #0D3B33;

  --button-mobile-secondary-background: #ffffff;
  --button-mobile-secondary-background-hover: #F5F5F2;
  --button-mobile-secondary-text: #1d8f00;
  --button-mobile-secondary-text-hover: #1d8f00;
  --button-mobile-secondary-border: #D8DDD9;
  --button-mobile-secondary-border-hover: #C9D0CB;

  /* ----------------- SKIP LINK ----------------- */

  --skip-link-background: #42a100;
  --skip-link-text: #ffffff;
  --skip-link-border: #42a100;
}

/* =========================================================
   HERO
========================================================= */

:root {
  --hero-background: #ffffff;
  --hero-title: #114a3f;
  --hero-title-sub: #42a100;
  --hero-text: #114a3f;
  --hero-text-soft: rgba(17, 74, 63, 0.8);
  --hero-label-background: #42a100;
  --hero-label-text: #ffffff;
  --hero-content-offset: 20px;
  --hero-content-offset-x: 100px;
  --hero-intro-max-width: 36ch;
  --hero-split-gap-mobile: 40px;
  --hero-split-gap-fluid: 6vw;
  --hero-split-gap-desktop: 100px;
  --hero-padding-top-mobile: 80px;
  --contact-hero-padding-top-extra: 0px;
}

/* =========================================================
   SERVICES
========================================================= */

:root {
  --services-title-align: center;
  --services-title-max-width: 22ch;
  --services-card-background: #ffffff;
  --services-card-background-hover: #ffffff;
  --services-card-text: #114a3f;
  --services-card-text-hover: #114a3f;
  --services-card-heading: #114a3f;
  --services-card-heading-hover: #114a3f;
  --services-card-border-color: #eef2f2;
  --services-card-border-width: 1px;
  --services-card-radius: 20px;
  --services-card-shadow: 0 4px 10px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --services-card-shadow-hover: 0 8px 18px rgba(0,0,0,0.10), 0 3px 6px rgba(0,0,0,0.05);
  --services-card-transform-hover: translateY(-4px);
  --services-card-transition: 0.25s ease;
  --services-card-text-max-width: 30ch;
  --services-card-arrow-color: #FFFFFF;
  --services-card-arrow-color-hover: #FFFFFF;
  --services-card-arrow-background: #326359;
  --services-card-arrow-background-hover: #114A3F;
}

/* ================= REVIEWS ================= */
:root {
  --reviews-card-background: #ffffff;
  --reviews-card-text: #114a3f;
  --reviews-card-border-color: #eef2f2;
  --reviews-card-border-width: 1px;
  --reviews-card-radius: 20px;
  --reviews-card-shadow: 0 2px 8px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.03);
  --reviews-card-quote-color: #e5e8e8;
  --reviews-summary-stars-color: #f7b900;
  --reviews-card-stars-color: #f7b900;
  --reviews-card-name-color: #114a3f;
  --reviews-card-meta-color: rgba(17, 74, 63, 0.8);
}

/* ================= FAQ ================= */
:root {
  --faq-radius: 20px;
  --faq-border-color: #cfd4da;
  --faq-question-background: #ffffff;
  --faq-question-background-hover: #fafcfc;
  --faq-answer-background: #f1f4f3;
  --faq-question-text: #114a3f;
  --faq-answer-text: #114a3f;
  --faq-chevron-color: #114a3f;
  --faq-max-width: 800px;
}

/* ================= CTA ================= */
:root {
  --cta-title-size: clamp(25px, 4vw, 36px);
  --cta-title-max-width: 30ch;
  --cta-title-max-width-mobile: 14ch;
  --cta-note-max-width: 22ch;
}

/* ================= FOOTER ================= */
:root {
  --footer-background: #114A3F;
  --footer-text: #ffffff;
  --footer-logo-height: 40px;
  --footer-logo-height-mobile: 34px;
}