/* @import "./_vars.css?v=12"; */

/* @import url("https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300..900&family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&display=swap"); */

:root {
  font-size: 18px;

  --body-font-family: "Darker Grotesque", sans-serif;
  --heading-font-family: "Libre Bodoni", serif;

  /* brand */
  --primary: #ef8406;
  --secondary: #e0e0e0;

  --text-color: #353535;
  --text-color-inverse: #fff;

  --white: #fff;
  --black: #000;

  /* configure the color palette */
  --palette-primary-hue: 58.56; /* Angolo esatto per il tuo arancione */
  --palette-primary-hue-rotate-by: 0; /* Manteniamo neutro per ora */
  --palette-primary-chroma: 1; /* Base value per calcolare le saturazioni */

  /* color variations: 2 lighter, primary, 2 darker */
  --color-primary-1: oklch(
    90% calc(0.08 * var(--palette-primary-chroma, 1))
      calc(
        var(--palette-primary-hue) + (0 * var(--palette-primary-hue-rotate-by))
      )
  ); /* Molto chiaro */

  --color-primary-2: oklch(
    80% calc(0.12 * var(--palette-primary-chroma, 1))
      calc(
        var(--palette-primary-hue) + (1 * var(--palette-primary-hue-rotate-by))
      )
  ); /* Chiaro */

  --color-primary-3: oklch(
    71.66% calc(0.1693 * var(--palette-primary-chroma, 1))
      calc(
        var(--palette-primary-hue) + (2 * var(--palette-primary-hue-rotate-by))
      )
  ); /* Colore primario */

  --color-primary-4: oklch(
    60% calc(0.15 * var(--palette-primary-chroma, 1))
      calc(
        var(--palette-primary-hue) + (3 * var(--palette-primary-hue-rotate-by))
      )
  ); /* Scuro */

  --color-primary-5: oklch(
    45% calc(0.12 * var(--palette-primary-chroma, 1))
      calc(
        var(--palette-primary-hue) + (4 * var(--palette-primary-hue-rotate-by))
      )
  ); /* Molto scuro */

  /* configure the color palette */
  --palette-secondary-hue: 0; /* Angolo a 0 per grigio neutro */
  --palette-secondary-hue-rotate-by: 0; /* Manteniamo neutro */
  --palette-secondary-chroma: 0; /* Chroma a 0 per grigi neutri */

  /* color variations: 2 lighter, primary, 2 darker */
  --color-secondary-1: oklch(
    98% calc(0.08 * var(--palette-secondary-chroma, 0))
      calc(
        var(--palette-secondary-hue) +
          (0 * var(--palette-secondary-hue-rotate-by))
      )
  ); /* Molto chiaro */

  --color-secondary-2: oklch(
    95% calc(0.12 * var(--palette-secondary-chroma, 0))
      calc(
        var(--palette-secondary-hue) +
          (1 * var(--palette-secondary-hue-rotate-by))
      )
  ); /* Chiaro */

  --color-secondary-3: oklch(
    90.67% calc(0.1693 * var(--palette-secondary-chroma, 0))
      calc(
        var(--palette-secondary-hue) +
          (2 * var(--palette-secondary-hue-rotate-by))
      )
  ); /* Colore primario */

  --color-secondary-4: oklch(
    85% calc(0.15 * var(--palette-secondary-chroma, 0))
      calc(
        var(--palette-secondary-hue) +
          (3 * var(--palette-secondary-hue-rotate-by))
      )
  ); /* Scuro */

  --color-secondary-5: oklch(
    80% calc(0.12 * var(--palette-secondary-chroma, 0))
      calc(
        var(--palette-secondary-hue) +
          (4 * var(--palette-secondary-hue-rotate-by))
      )
  ); /* Molto scuro */

  /* use colors with light-dark() for adaptive props */
  --surface-1: var(--color-secondary-1);
  --surface-2: var(--color-secondary-2);
  --surface-3: var(--color-secondary-2);
  --surface-document: var(--white);

  --shadow-color-1: hsl(0 0% 0% / 0.15);
  --shadow-color-2: hsl(0 0% 0% / 0.45);
  --depth-3: 0 2px 2px 0 var(--shadow-color-1),
    0 4px 6px 3px var(--shadow-color-2);
  --depth-4: 0 4px 8px 0 var(--shadow-color-1);
  --depth-5: 0 4px 18px 0 var(--shadow-color-1);
  --depth-8: 0 8px 24px 0 var(--shadow-color-2);

  --button-border-radius: 4rem;

  --border-radius-xs: 0.15rem;

  --grid-max-width: 100%;
  --grid-max-width-wider: 100%;
}

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-smaller,
.container-xxl {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  :root {
    --grid-max-width: 540px;
  }

  .container,
  .container-sm {
    max-width: var(--grid-max-width);
  }
}

@media (min-width: 768px) {
  :root {
    --grid-max-width: 720px;
  }

  .container,
  .container-md,
  .container-sm {
    max-width: var(--grid-max-width);
  }
}

@media (min-width: 992px) {
  :root {
    --grid-max-width: 960px;
  }

  .container,
  .container-lg,
  .container-md,
  .container-sm {
    max-width: var(--grid-max-width);
  }
}

@media (min-width: 1200px) {
  :root {
    --grid-max-width: 1140px;
  }

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: var(--grid-max-width);
  }
}

@media (min-width: 1400px) {
  :root {
    --grid-max-width: 1320px;
  }

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-smaller,
  .container-xxl {
    max-width: var(--grid-max-width);
  }
}

@media (min-width: 1600px) {
  :root {
    --grid-max-width: 1400px;
    --grid-max-width-wider: 1500px;
    --grid-max-width-smaller: 1320px;
  }

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: var(--grid-max-width);
  }

  .container-smaller {
    max-width: var(--grid-max-width-smaller);
  }

  .container-xxl {
    max-width: var(--grid-max-width-wider);
  }
}

@media (min-width: 1900px) {
  :root {
    --grid-max-width: 1500px;
    --grid-max-width-wider: 1760px;
    --grid-max-width-smaller: 1320px;
  }

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: var(--grid-max-width);
  }

  .container-smaller {
    max-width: var(--grid-max-width-smaller);
  }

  .container-xxl {
    max-width: var(--grid-max-width-wider);
  }
}