@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,500;9..40,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

:root {
  --clr-dark: hsl(253, 69%, 8%);
  --clr-black: hsl(0, 0%, 0%);
  --clr-gray: hsl(0, 0%, 64%);
  --clr-dark-blue: hsl(254, 54%, 11%);
  --clr-cyan: hsl(185, 99%, 56%);
  --clr-cyan-hover: hsl(185, 100%, 40%);

  --clr-white: hsl(0, 0%, 100%);
  --clr-white-transparent: hsla(0, 0%, 80%, 0.527);

  /* Tokens Sémantiques */
  --ff-sans: "DM sans", sans-serif;
  --fg: var(--clr-dark);
  --fg-light: var(--clr-gray);

  --bg: var(--clr-white);
  --bg-transparent: var(--clr-white-transparent);
  --bg-card: var(--clr-dark-blue);
  --primary: var(--clr-cyan);
  --primary-hover: var(--clr-cyan-hover);
  --font-card: var(--clr-white);

  /* font */

  /* size */
  --fs-medium: 1.5rem;
  --fs-small: 1rem;
  --fs-large: 2rem;
  --fs-xlarge: 3rem;

  --fs-lore: 0.8rem;

  /* sémantique */
  --fs-title: var(--fs-xlarge);
  --fs-subtitle: var(--fs-medium);
  --fs-card: var(--fs-medium);

  /* weight */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
}