@font-face {
  font-family: 'Noi Grotesk';
  src: url('../fonts/NoiVariableFlexGX.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noi Grotesk';
  src: url('../fonts/NoiVariableFlexGX.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* === Modern CSS Reset & Fluid Base === */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  font-family: var(--brand-font-family);
  font-weight: var(--brand-font-regular);
  min-height: 100vh;
  min-height: 100lvh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Fluid typography scale */
:root {
  --brand-font-family: 'Noi Grotesk', sans-serif;
  --brand-font-regular: 400;
  --brand-font-medium: 500;

  /* Expo brand palette */
  --brand-vieux-rose-rgb: 181 158 153;
  --brand-blue-dark-rgb: 31 45 58;
  --brand-sand-rgb: 233 211 160;
  --brand-blue-gray-rgb: 177 191 201;

  /* Vieux rose */
  --brand-vieux-rose-0: #f7f1ef;
  --brand-vieux-rose-25: rgb(var(--brand-vieux-rose-rgb) / 25%);
  --brand-vieux-rose-65: rgb(var(--brand-vieux-rose-rgb) / 65%);
  --brand-vieux-rose-100: #b59e99;

  /* Bleu fonce */
  --brand-blue-dark-0: #eef1f3;
  --brand-blue-dark-25: rgb(var(--brand-blue-dark-rgb) / 25%);
  --brand-blue-dark-65: rgb(var(--brand-blue-dark-rgb) / 65%);
  --brand-blue-dark-100: #1f2d3a;

  /* Jaune sable */
  --brand-sand-0: #faf6ed;
  --brand-sand-25: rgb(var(--brand-sand-rgb) / 25%);
  --brand-sand-65: rgb(var(--brand-sand-rgb) / 65%);
  --brand-sand-100: #e9d3a0;

  /* Bleu gris */
  --brand-blue-gray-0: #f1f4f6;
  --brand-blue-gray-25: rgb(var(--brand-blue-gray-rgb) / 25%);
  --brand-blue-gray-65: rgb(var(--brand-blue-gray-rgb) / 65%);
  --brand-blue-gray-100: #b1bfc9;

  --fs-xs:   clamp(0.70rem, 0.66rem + 0.20vw, 0.80rem);
  --fs-sm:   clamp(0.80rem, 0.74rem + 0.30vw, 0.95rem);
  --fs-base: clamp(0.95rem, 0.87rem + 0.40vw, 1.15rem);
  --fs-md:   clamp(1.10rem, 0.98rem + 0.60vw, 1.40rem);
  --fs-lg:   clamp(1.35rem, 1.15rem + 1.00vw, 1.85rem);
  --fs-xl:   clamp(1.70rem, 1.38rem + 1.60vw, 2.50rem);
  --fs-2xl:  clamp(2.15rem, 1.65rem + 2.50vw, 3.50rem);
  --fs-3xl:  clamp(2.70rem, 1.95rem + 3.75vw, 5.00rem);
  --fs-hero: clamp(3.50rem, 2.30rem + 6.00vw, 7.50rem);

  /* Spacing scale */
  --space-xs:  clamp(0.25rem, 0.20rem + 0.25vw, 0.50rem);
  --space-sm:  clamp(0.50rem, 0.40rem + 0.50vw, 0.85rem);
  --space-md:  clamp(1.00rem, 0.80rem + 1.00vw, 1.75rem);
  --space-lg:  clamp(1.50rem, 1.15rem + 1.75vw, 2.75rem);
  --space-xl:  clamp(2.50rem, 1.85rem + 3.25vw, 4.50rem);
  --space-2xl: clamp(4.00rem, 2.80rem + 6.00vw, 8.00rem);
  --space-3xl: clamp(6.00rem, 4.00rem + 10.00vw, 12.00rem);

  /* Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Transitions */
  --transition-fast: 150ms var(--ease-smooth);
  --transition-base: 300ms var(--ease-smooth);
  --transition-slow: 600ms var(--ease-out-expo);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input, button, textarea, select {
  font: inherit;
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  line-height: 1.15;
}

p {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Selection */
::selection {
  background-color: var(--color-accent, #7B6F5B);
  color: var(--color-bg, #fff);
}