/* ===============================
   STYLE TILE — base tokens
   =============================== */

:root {
  /* Palette Colori */
  --col-verde: #6E8C63;
  --col-verde-dark: #516A48;
  --col-verde-light: #A2B99A;
  --col-arancio: #E49954;
  --col-arancio-dark: #B17136;
  --col-arancio-light: #E3C4A7;
  --col-brown: #5F4F31;
  --col-brown-medium: #968668;
  --col-brown-light: #C9BCA4;
  --col-brown-dark: #41351D;
  --col-red: #A3492E;
  --col-white: #FFFFFF;
  --col-black: #000000;

  /* Tipi */
  --ff-sans: "Poppins", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Raggi e bordi */
  --radius-pill: 999px;
  --border-1: 1px;
  --border-2: 2px;

  /* Timing */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 0.2s;
}

.st-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

img {
  display: block;
}

a {
  text-decoration: none;
}

/* ===============================
     Utilities colori — testo / bg / bordo
     =============================== */

/* Text color */
.st-text-verde {
  color: var(--col-verde);
}
.st-text-verde-dark {
  color: var(--col-verde-dark);
}
.st-text-verde-light {
  color: var(--col-verde-light);
}
.st-text-arancio {
  color: var(--col-arancio);
}
.st-text-arancio-dark {
  color: var(--col-arancio-dark);
}
.st-text-arancio-light {
  color: var(--col-arancio-light);
}
.st-text-brown {
  color: var(--col-brown);
}
.st-text-brown-medium {
  color: var(--col-brown-medium);
}
.st-text-brown-light {
  color: var(--col-brown-light);
}
.st-text-brown-dark {
  color: var(--col-brown-dark);
}
.st-text-red {
  color: var(--col-red);
}
.st-text-white {
  color: var(--col-white);
}
.st-text-black {
  color: var(--col-black);
}

/* Background */
.st-bg-verde {
  background-color: var(--col-verde);
}
.st-bg-verde-dark {
  background-color: var(--col-verde-dark);
}
.st-bg-verde-light {
  background-color: var(--col-verde-light);
}
.st-bg-arancio {
  background-color: var(--col-arancio);
}
.st-bg-arancio-dark {
  background-color: var(--col-arancio-dark);
}
.st-bg-arancio-light {
  background-color: var(--col-arancio-light);
}
.st-bg-brown {
  background-color: var(--col-brown);
}
.st-bg-brown-medium {
  background-color: var(--col-brown-medium);
}
.st-bg-brown-light {
  background-color: var(--col-brown-light);
}
.st-bg-brown-dark {
  background-color: var(--col-brown-dark);
}
.st-bg-red {
  background-color: var(--col-red);
}
.st-bg-white {
  background-color: var(--col-white);
}
.st-bg-black {
  background-color: var(--col-black);
}

/* Border color */
.st-border-verde {
  border-color: var(--col-verde);
}
.st-border-verde-dark {
  border-color: var(--col-verde-dark);
}
.st-border-verde-light {
  border-color: var(--col-verde-light);
}
.st-border-arancio {
  border-color: var(--col-arancio);
}
.st-border-arancio-dark {
  border-color: var(--col-arancio-dark);
}
.st-border-arancio-light {
  border-color: var(--col-arancio-light);
}
.st-border-brown {
  border-color: var(--col-brown);
}
.st-border-brown-medium {
  border-color: var(--col-brown-medium);
}
.st-border-brown-light {
  border-color: var(--col-brown-light);
}
.st-border-brown-dark {
  border-color: var(--col-brown-dark);
}
.st-border-red {
  border-color: var(--col-red);
}
.st-border-white {
  border-color: var(--col-white);
}
.st-border-black {
  border-color: var(--col-black);
}

/* ===============================
     Tipografia — MOBILE default
     (≤ 767px)
     =============================== */

.st-font-sans {
  font-family: var(--ff-sans);
}

html {
  font-family: var(--ff-sans);
  color: var(--col-brown);
  overflow-x: hidden;
}

body {
  opacity: 0.01;
  animation: fadeIn 0.8s ease-in forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

h1, h2, h3, h4 {
  font-family: var(--ff-sans);
  margin: 0;
}
p {
  margin: 0;
}

/* Titolo H1 Plus */
.st-h1-plus {
  font-weight: 700;
  font-size: 48px;
  line-height: 58px;
}

/* Titolo H1 */
h1.st-h1,
.st-h1 {
  font-weight: 700;
  font-size: 36px;
  line-height: 42px;
}

/* Titolo H2 */
h2, .st-h2 {
  font-weight: 700;
  font-size: 28px;
  line-height: 50px;
}
.st-h2-bold {
  font-weight: 700;
  font-size: 28px;
  line-height: 50px;
}
.st-h2-medium {
  font-weight: 500;
  font-size: 28px;
  line-height: 50px;
}

/* Titolo H3 */
h3, .st-h3 {
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
}
.st-h3-medium {
  font-weight: 500;
  font-size: 24px;
  line-height: 28px;
}

/* Titolo H4 */
h4, .st-h4 {
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
}
.st-h4-bold {
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
}
.st-h4-medium {
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
}

/* Corpo Testo Primario */
body, .body, .st-body-primary {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  margin: 0;
  overflow-x: hidden;
}

/* Corpo Testo Secondario */
.st-body-secondary {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

/* Menù */
.menu-voice {
  font-weight: 600;
  font-size: 14px;
  line-height: 0;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ===============================
     Tipografia — DESKTOP
     (≥ 768px)
     =============================== */
@media (min-width: 768px) {
  .st-h1-plus {
    font-size: 55px;
    line-height: 65px;
  }

  h1.st-h1,
  .st-h1 {
    font-size: 48px;
    line-height: 58px;
  }

  h2, .st-h2, .st-h2-bold {
    font-size: 36px;
    line-height: 42px;
  }
  .st-h2-medium {
    font-size: 36px;
    line-height: 42px;
  }

  h3, .st-h3 {
    font-size: 28px;
    line-height: 32px;
  }
  .st-h3-medium {
    font-size: 28px;
    line-height: 32px;
  }

  h4, .st-h4, .st-h4-bold {
    font-size: 21px;
    line-height: 26px;
  }
  .st-h4-medium {
    font-size: 21px;
    line-height: 26px;
  }

  /* Corpo Testo Primario */
  body, .body, .st-body-primary {
    font-size: 18px;
    line-height: 26px;
  }

  /* Corpo Testo Secondario */
  .st-body-secondary {
    font-size: 16px;
    line-height: 24px;
  }

  /* Menù */
  .menu-voice {
    font-size: 16px;
    letter-spacing: 50px;
  }
}

/* ===============================
     Helpers bordo & raggio
     =============================== */
.round-pill {
  border-radius: var(--radius-pill);
}
.st-border-1 {
  border-width: var(--border-1);
  border-style: solid;
}
.st-border-2 {
  border-width: var(--border-2);
  border-style: solid;
}