:root {
  --color-primary: #009640;
  --filter-primary: invert(32%) sepia(97%) saturate(919%) hue-rotate(113deg) brightness(99%) contrast(101%);
  --color-secondary: #163300;
  --color-accent: #C8EE5B;

  --color-text: #000000;
  /* --color-text-muted: #777777; */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F3F5FA;
  --color-bg-dark: #173130;

  /* === Tipografía === */
  --font-titles: 'Riga Med', sans-serif;
  --font-titles-alt: 'Riga', sans-serif;
  --font-base: 'Inter', sans-serif;
  /* o la que venga de Figma */
  --font-size-base: 20px;

  /* === Layout === */
  --max-width: 1700px;
  --container-padding: 4rem;
  --section-padding: 4rem;
  --container-offset: calc((100vw - var(--max-width)) / 2);

  /* === Header / Footer === */
  --header-height: 80px;

  /* === UI === */
  --border-radius: 20px;
  --border-radius-buttons: 25px;
  --transition-base: 0.3s ease;

  /* === Z-index === */
  --z-header: 100;
  --z-menu: 200;

  /* === Breakpoints === */
  --bp-mobile: 768px;
  --bp-tablet: 1024px;

  @media (max-width: 1024px) {
    --container-padding: 2rem;
    /* --section-padding: 2rem; */
  }

  @media (max-width: 768px) {
    --container-padding: 1.6rem;
    --font-size-base: 19px;
    /* --section-padding: 2rem; */
  }

}