:root {
  --color-dark-blue: #0f172a;
  --color-gold: #d4af37;
  --color-stone: #f8fafc;
  --color-slate: #475569;
  --color-light-slate: #98a1ad;
  --color-white: #fff;

  --color-dark-blue-rgba-0: rgba(15, 23, 42, 0);
  --color-dark-blue-rgba-1: rgba(15, 23, 42, 1);

  --btn-padding-x: 1.5rem; /* px-6 */
  --btn-padding-y: 0.6rem; /* py-3 */
  --btn-radius: 0.5rem; /* rounded-lg */
  --btn-font-weight: 700; /* font-bold */
}

/*************************************/
/************* GENERAL ***************/
/*************************************/
html {
  /* scroll-snap-type: y mandatory; */
  scroll-behavior: smooth;
}
/* 
section {
  scroll-snap-align: start;
} */

body {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: var(--color-dark-blue);
}

h1,
h2,
h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
}

h1 {
  color: var(--color-white);
  text-transform: uppercase;
}

h2 {
  text-transform: uppercase;
}

h3 {
  font-weight: bold;
}

/*** TITRES ***/
.font-h1-clamp {
  font-size: clamp(28px, 6vw, 70px);
  line-height: clamp(32px, 6vw, 80px);
}

.font-h2-clamp {
  font-size: clamp(24px, 4vw, 48px);
}

.font-h3-clamp {
  font-size: clamp(20px, 3vw, 32px);
}

.font-brand-clamp {
  font-size: clamp(24px, 2.5vw, 36px);
  text-transform: uppercase;
  font-style: italic;
  font-weight: bold;
}

/*** BOUTONS ***/
.gold-btn {
  font-weight: var(--btn-font-weight);
  color: var(--color-white);
  background-color: var(--color-gold);
  border: 1px solid var(--color-gold);
  transition:
    background-color 0.3s ease,
    transform 0.2s ease;
  text-transform: uppercase;
}
.gold-btn:hover {
  background-color: var(--color-dark-blue);
  border: 1px solid var(--color-dark-blue);
}

.gold-to-slate-btn {
  font-weight: var(--btn-font-weight);
  color: var(--color-white);
  background-color: var(--color-gold);
  border: 1px solid var(--color-gold);
  transition:
    background-color 0.3s ease,
    transform 0.2s ease;
  text-transform: uppercase;
}
.gold-to-slate-btn:hover {
  background-color: var(--color-slate);
  border: 1px solid var(--color-slate);
}

.dark-blue-btn {
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  font-weight: var(--btn-font-weight);
  color: var(--color-white);
  background-color: var(--color-dark-blue);
  border: 1px solid var(--color-dark-blue);
  transition:
    background-color 0.3s ease,
    transform 0.2s ease;
  text-transform: uppercase;
}
.dark-blue-btn:hover {
  background-color: var(--color-gold);
  border: 1px solid var(--color-gold);
}

.container {
  max-width: clamp(200px, 80vw, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/*************************************/
/************* HERO ***************/
/*************************************/

.hero-bg-img {
  background-image:
    linear-gradient(
      to right,
      rgba(15, 23, 42, 0.8) 30%,
      rgba(15, 23, 42, 0.6) 100%
    ),
    url("img/design-nature-house.avif");
  background-position: center 0%;
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
}