/* CUSTOM PROPERTIES */
:root {
  /* COLORS */
  --color-primary: #212121;
  --color-secondary: #ffffff;
  --color-accent: #2d32bc;
  --color-text: #212121;
  --color-text-muted: #595959;
  --color-text-light: #b7b7b7;
  --color-border: #dadada;
  --color-border-light: #e6e6e6;
  --color-bg-light: #f3f3f3;
  --color-bg-lighter: #f9f9f9;

  /* TYPOGRAPHY */
  --header-h2-font: 700 2rem/2.5rem "Hanken Grotesk", sans-serif;
  --header-h3-font: 700 1.5rem/1.75rem "Hanken Grotesk", sans-serif;
  --body-l-font: 400 1.125rem/1.75rem "Hanken Grotesk", sans-serif;
  --body-l-strong-font: 600 1.125rem/1.75rem "Hanken Grotesk", sans-serif;
  --body-m-font: 400 1rem/1.5rem "Hanken Grotesk", sans-serif;
  --body-m-strong-font: 600 1rem/1.5rem "Hanken Grotesk", sans-serif;
  --label-font: 400 0.75rem/1rem "Hanken Grotesk", sans-serif;
}

/* GENERAL */
html {
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
  max-width: 100vw;
  background-color: var(--color-secondary);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Hanken Grotesk", sans-serif;
  font-optical-sizing: auto;
  font: var(--body-m-font);
}

h1,
p {
  font: var(--body-m-font);
  color: var(--color-text);
}
h2 {
  font: var(--header-h2-font);
  color: var(--color-text);
}
h3 {
  font: var(--header-h3-font);
  color: var(--color-text);
}
strong {
  font: var(--body-m-strong-font);
  color: var(--color-text);
}

/* MEDIA QUERIES PER TIPOGRAFIA DESKTOP (Da 1080px in poi) */
@media (min-width: 1080px) {
  *,
  h1,
  p {
    font: var(--body-l-font);
  }
  strong {
    font: var(--body-l-strong-font);
  }
}

/* BOTTONI  */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.1s ease,
    background-color 0.1s ease,
    box-shadow 0.1s ease,
    opacity 0.2s ease;
}

.btn--m {
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font: var(--body-m-strong-font);
}

.btn--l {
  padding: 1.25rem 3.5rem;
  border-radius: 6px;
  font: var(--body-m-strong-font);
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-secondary);
}

.btn--primary:not(:disabled):hover {
  background: #2b2b2b;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.4);
}

.btn--primary:not(:disabled):active {
  transform: scale(0.98);
  background: #1a1a1a;
  box-shadow: 0 1.96px 3.92px 0 rgba(0, 0, 0, 0.8);
}

.btn--reverse {
  background-color: var(--color-secondary);
  color: var(--color-primary);
}

.btn--reverse:not(:disabled):hover {
  background: var(--color-bg-lighter);
  box-shadow: 0 4px 12px 0 rgba(255, 255, 255, 0.15);
}

.btn--reverse:not(:disabled):active {
  transform: scale(0.98);
  background: #e0e0e0;
  box-shadow: 0 1.96px 3.92px 0 rgba(0, 0, 0, 0.2) inset;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  filter: grayscale(0.6);
  transform: none;
  box-shadow: none;
}