@import url('https://fonts.googleapis.com/css2?family=Cabinet+Grotesk:wght@400;500;700;800;900&family=Fraunces:ital,wght@0,700;0,900;1,400;1,700;1,900&display=swap');

:root {
  /* Couleurs */
  --ocean:       #1B6CA8;
  --ocean-dark:  #0D4470;
  --sun:         #FFCA3A;
  --sun-pale:    #FFF9E0;
  --sand:        #FDF6EC;
  --sand-mid:    #F0E4CC;
  --terracotta:  #E07A5F;
  --green:       #2A9D5C;
  --green-pale:  #E8F7F0;
  --green-border:#A8E0C2;
  --dark:        #1A1A2E;
  --white:       #FFFFFF;
  --muted:       #7A8A94;

  /* Typographie */
  --font-sans:   'Cabinet Grotesk', sans-serif;
  --font-serif:  'Fraunces', serif;

  /* Spacing */
  --section-pad: 4rem 1.25rem;
  --card-radius: 20px;
  --pill-radius: 100px;

  /* Transitions */
  --ease:        0.22s ease;
}

@media (min-width: 1280px) {
  :root {
    --section-pad: 7rem 5rem;
  }
}

body {
  font-family: var(--font-sans);
  background: var(--sand);
  color: var(--dark);
  overflow-x: hidden;
}