:root {
  --noir: #000000;
  --blanc: #ffffff;
  --gris: #625e5f;
  --primary: #008dd4;
  --secondary: #44b9dc;

  --tertiary: #71aa27;
  --textPrimary: #008dd4;
  --textSecondary: #44b9dc;
  --primaryLight: rgba(31, 158, 217, 0.2);
  --degrade: linear-gradient(90deg, var(--primary) 0%, var(--tertiary) 100%);

  --transition-all: all 0.4s ease;

  --font-size-html: 16px;

  --font-family: "Work Sans", sans-serif;

  --light: 300;
  --normal: 400;
  --semi-bold: 600;
  --bold: 700;
  --extra-bold: 800;
  --black: 900;

  --rounded-s: 0rem;
  --rounded: 0rem;
  --rounded-l: 0rem;
  --rounded-xl: 0rem;
  --box-radius: var(--rounded);
  --header-height: 90px;
  --admin-bar-height: 46px;

  --container-width: calc(100% - 30px);

  --fs-s: 0.8rem;
  --fs-base: 1rem;
  --fs-m: 1.2rem;
  --fs-l: 1.5rem;
  --fs-xl: 2rem;
  --fs-2xl: 2.1rem;

  --gap-062: 0.62rem;
  --gap-125: 1rem;
  --gap-188: 1.25rem;
  --gap-312: 1.88rem;
  --gap-625: 3.12rem;

  --space-v: calc(var(--gap-312));
  --space-h: calc(var(--gap-312));
}
@media (min-width: 640px) {
  :root {
    --container-width: calc(640px - 60px);
    --fs-xl: 2.8rem;
    --fs-2xl: 3.2rem;
  }
}
@media (min-width: 768px) {
  :root {
    --container-width: calc(768px - 90px);
  }
}

@media (min-width: 783px) {
  :root {
    --admin-bar-height: 32px;
  }
}
@media (min-width: 1024px) {
  :root {
    --header-width: 110px;
    --font-size-html: 16px;
    --container-width: calc(1024px - 150px);
    --fs-xl: 3.5rem;
    --fs-2xl: 3.8rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --header-width: 120px;
    --container-width: calc(1280px - 202px);
    --fs-xl: 4.2rem;
    --fs-2xl: 4.5rem;
  }
}
@media (min-width: 1536px) {
  :root {
    /* --container-width: 1248px; */
    --container-width: 1368px;

    --fs-s: 1rem;
    --fs-base: 1.125rem;
    --fs-m: 1.25rem;
    --fs-l: 2.5rem;
    --fs-xl: 3.75rem;
    --fs-2xl: 6.25rem;
    --gap-062: 0.62rem;
    --gap-125: 1.25rem;
    --gap-188: 1.88rem;
    --gap-312: 3.12rem;
    --gap-625: 6.25rem;
  }
}