@import url("https://fonts.googleapis.com/css2?family=Boldonse&family=Space+Grotesk:wght@400;500;700&display=swap");

:root {
  --color-principale: #82152E;
  --color-secondaire: #B7E0ED;
  --color-soutien-1: #FFF1B4;
  --color-soutien-2: #ECEBDC;
  --color-noir: #1A1A1A;
  --color-gris: #6B6B6B;
  --color-gris-clair: #D9D9D8;
  --color-blanc: #FFFFFF;

  --color-bg: var(--color-soutien-2);
  --color-text: var(--color-noir);
  --color-accent: var(--color-principale);
  --color-muted: var(--color-gris);
  --color-line: var(--color-gris-clair);

  --c-bg: var(--color-bg);
  --c-fg: var(--color-text);
  --c-muted: var(--color-muted);
  --c-line: var(--color-line);
  --c-accent: var(--color-accent);

  --ff-display: "Boldonse", "Times New Roman", serif;
  --ff-body: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;

  --fs-text-d: 16px;
  --fs-text-t: 12.8px;
  --fs-text-m: 12.5px;

  --fs-small-d: 12.8px;
  --fs-small-t: 10.2px;
  --fs-small-m: 9px;

  --fs-title-sm-d: 16px;
  --fs-title-sm-t: 12.8px;
  --fs-title-sm-m: 11.2px;

  --fs-title-d: 31.3px;
  --fs-title-t: 25px;
  --fs-title-m: 21.1px;

  --fs-title-xl-d: 48.8px;
  --fs-title-xl-t: 39.1px;
  --fs-title-xl-m: 34.2px;

  --fs-display-xl: clamp(4rem, 18vw, 16rem);
  --fs-display-lg: clamp(2.75rem, 8vw, 6rem);
  --fs-display-md: clamp(2rem, 5vw, 3.5rem);
  --fs-display-sm: clamp(1.5rem, 3vw, 2.25rem);

  --fs-body-lg: var(--fs-text-d);
  --fs-body: var(--fs-text-d);
  --fs-small: var(--fs-small-d);
  --fs-tiny: 11px;

  --lh-tight: 1;
  --lh-snug: 1.15;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  --tracking-display: -0.01em;
  --tracking-label: 0.04em;
  --tracking-wide: 0.08em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 12rem;

  --grid-columns: 4;
  --grid-gutter: 20px;
  --grid-margin: 20px;

  --container-max: 1280px;
  --container-pad-d: 40px;
  --container-pad-t: 28px;
  --container-pad-m: 20px;

  --bp-mobile: 480px;
  --bp-tablet: 800px;
  --bp-desktop: 1280px;

  --radius-pill: 999px;
  --radius-sm: 4px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 600ms;
}

@media (max-width: 1279px) {
  :root {
    --fs-body-lg: var(--fs-text-t);
    --fs-body: var(--fs-text-t);
    --fs-small: var(--fs-small-t);
  }
}

@media (max-width: 799px) {
  :root {
    --fs-body-lg: var(--fs-text-m);
    --fs-body: var(--fs-text-m);
    --fs-small: var(--fs-small-m);
  }
}