/* ===== VARIABLES DE TYPOGRAPHIE ===== */
:root {
  /* Polices */
  --font-primary: 'NeueHaasDisplay', sans-serif;

  /* Poids */
  --font-weight-thin: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 800;

  /* Tailles */
  --font-size-xs: 0.8rem;
  --font-size-sm: 1rem;
  --font-size-md: 1.2rem;
  --font-size-lg: 1.5rem;
  --font-size-xl: 2rem;
  --font-size-xxl: 3rem;
  --font-size-3xl: 6rem;

  /* Hauteurs de ligne */
  --line-height-sm: 1.2;
  --line-height-md: 1.5;
  --line-height-lg: 1.8;

  /* Espacement */
  /*--letter-spacing-tight: -0.02em;*/
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-small: -0.05em;
}

/* ===== POLICES CUSTOM ===== */
@font-face {
  font-family: 'NeueHaasDisplay';
  src: url('../fonts/NeueHaasDisplayRoman.woff2') format('woff2');
  font-weight: var(--font-weight-regular);
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NeueHaasDisplay';
  src: url('../fonts/NeueHaasDisplayBold.woff2') format('woff2');
  font-weight: var(--font-weight-bold);
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NeueHaasDisplay';
  src: url('../fonts/NeueHaasDisplayThin.woff2') format('woff2');
  font-weight: var(--font-weight-thin);
  font-style: normal;
  font-display: swap;
}

/* ===== STYLES DE BASE ===== */
body {
  font-family: var(--font-primary);

  font-size: var(--font-size-sm);
  line-height: var(--line-height-md);
  color: #333;
}

h1 {
  font-size: var(--font-size-xxl);

  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: 0.5em;
}

h2 {
  font-size: var(--font-size-xl);

  line-height: var(--line-height-sm);
  margin-bottom: 0.5em;
}

h3 {
  font-size: var(--font-size-lg);

  line-height: var(--line-height-sm);
  margin-bottom: 0.5em;
}

p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-md);
  margin-bottom: 1em;
}

/* Classes utilitaires pour la typo */
.text-thin { font-weight: var(--font-weight-thin); }
.text-regular { font-weight: var(--font-weight-regular); }
.text-bold { font-weight: var(--font-weight-bold); }

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-xxl { font-size: var(--font-size-xxl); }