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

:root {
  /* Brand */

  --color-primary: #5dff6e;
  --color-primary-hover: #25d366;
  --color-accent: #000000;
  --color-accent-hover: #3b3b3b;
  --color-secondary: #1b613e;

  /* Base */
  --color-background: #ffffff;
  --site-background: #121a24;
  --color-text: #111111;
  --color-text-soft: #70767e;
  --color-white: #ffffff;

  /* Links */
  --color-link: #111111;
  --color-link-hover: #505dff;
}

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

:root {
  --color-muted-bg: #f2f4f5;
  --color-primary-soft: #f5fde9;
  --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: #5dff6e;
  --icon-trust-check: #121a24;
}

/* =========================================================
   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: 22ch;

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

  --home-h1-size-mobile: 34px;
  --home-h1-size-fluid: 7vw;
  --home-h1-size-desktop: 64px;
  --home-h1-max-width: 30ch;
  --home-hero-intro-max-width: 39ch;
}

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

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

/* =========================================================
   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: 8px;
  --radius-card: 8px;
  --radius-media: 8px;
  --radius-button: 8px;
  --radius-form: 4px;
}

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

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

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

:root {
  --header-background: #121a24;
  --header-shadow: rgba(0, 0, 0, 0.06);
  --header-logo-height: 26px;
  --header-logo-height-mobile: 24px;
  --header-height: 70px;
  --header-height-mobile: 90px;
  --mobile-menu-background: #ffffff;
  --menu-toggle-background: transparent;
  --menu-toggle-icon: #ffffff;
  --menu-close-background: #ffffff;
  --menu-close-icon: #111111;
  --mobile-bar-background: #000000;
}

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

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

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

  --button-primary-background: #5dff6e;
  --button-primary-background-hover: #25d366;
  --button-primary-text: #000000;
  --button-primary-text-hover: #000000;
  --button-primary-border: #5dff6e;
  --button-primary-border-hover: #25d366;

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

  --button-secondary-background: #121a24;
  --button-secondary-background-hover: #202733;
  --button-secondary-text: #ffffff;
  --button-secondary-text-hover: #ffffff;
  --button-secondary-border: #3b424f;
  --button-secondary-border-hover: #4e5463;

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

  --button-subtle-background: #121a24;
  --button-subtle-background-hover: #202733;
  --button-subtle-text: #ffffff;
  --button-subtle-text-hover: #ffffff;
  --button-subtle-border: #3b424f;
  --button-subtle-border-hover: #4e5463;

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

  --button-navbar-primary-background: #5dff6e;
  --button-navbar-primary-background-hover: #25d366;
  --button-navbar-primary-text: #000000;
  --button-navbar-primary-text-hover: #000000;
  --button-navbar-primary-border: #5dff6e;
  --button-navbar-primary-border-hover: #25d366;

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

  --button-hover-transform: none;

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

  --button-mobile-primary-background: #5dff6e;
  --button-mobile-primary-background-hover: #25d366;
  --button-mobile-primary-text: #000000;
  --button-mobile-primary-text-hover: #000000;
  --button-mobile-primary-border: #5dff6e;
  --button-mobile-primary-border-hover: #25d366;

  --button-mobile-secondary-background: #000000;
  --button-mobile-secondary-background-hover: #202733;
  --button-mobile-secondary-text: #ffffff;
  --button-mobile-secondary-text-hover: #ffffff;
  --button-mobile-secondary-border: #3b424f;
  --button-mobile-secondary-border-hover: #4e5463;

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

  --skip-link-background: #5dff6e;
  --skip-link-text: #121a24;
  --skip-link-border: #5dff6e;
}

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

:root {
  --hero-background: #121a24;
  --hero-title: #ffffff;
  --hero-title-sub: #5dff6e;
  --hero-text: #ffffff;
  --hero-text-soft: rgba(255,255,255,0.6);
  --hero-label-background: #5dff6e;
  --hero-label-text: #000000;
  --hero-content-offset: 0px;
  --hero-content-offset-x: 80px;
  --hero-intro-max-width: 40ch;
  --hero-split-gap-mobile: 8px;
  --hero-split-gap-fluid: 2vw;
  --hero-split-gap-desktop: 16px;
  --hero-padding-top-mobile: 80px;
  --contact-hero-padding-top-extra: var(--space-s);
}

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

:root {
  --services-title-align: left;
  --services-title-max-width: 22ch;
  --services-card-background: #e0e7ec;
  --services-card-background-hover: #73ff82;
  --services-card-text: #202e40;
  --services-card-text-hover: #121a24;
  --services-card-heading: #182330;
  --services-card-heading-hover: #121a24;
  --services-card-border-color: transparent;
  --services-card-border-width: 0px;
  --services-card-radius: 8px;
  --services-card-shadow: none;
  --services-card-shadow-hover: none;
  --services-card-transform-hover: scale(1.015);
  --services-card-transition: 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  --services-card-text-max-width: 44ch;
  --services-card-arrow-color: #1b4d53;
  --services-card-arrow-color-hover: #121a24;
  --services-card-arrow-background: transparent;
  --services-card-arrow-background-hover: transparent;
}

/* ================= REVIEWS ================= */
:root {
  --reviews-card-background: #73ff82;
  --reviews-card-text: #121a24;
  --reviews-card-border-color: transparent;
  --reviews-card-border-width: 0px;
  --reviews-card-radius: 8px;
  --reviews-card-shadow: none;
  --reviews-card-quote-color: transparent;
  --reviews-summary-stars-color: #121a24;
  --reviews-card-stars-color: #121a24;
  --reviews-card-name-color: #121a24;
  --reviews-card-meta-color: #1b4d53;
}

/* ================= FAQ ================= */
:root {
  --faq-radius: 8px;
  --faq-border-color: #d7dbe0;
  --faq-question-background: #ffffff;
  --faq-question-background-hover: #fcfdfd;
  --faq-answer-background: #f2f4f5;
  --faq-question-text: #111111;
  --faq-answer-text: #20242a;
  --faq-chevron-color: #7A7F87;
  --faq-max-width: 900px;
}

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

/* ================= FOOTER ================= */
:root {
  --footer-background: #121a24;
  --footer-text: #ffffff;
  --footer-logo-height: 30px;
  --footer-logo-height-mobile: 26px;
}