@font-face {
  font-family: "Fredoka";
  /* Es vital añadir la instrucción 'format("woff2-variations")' */
  src: url("../fonts/Fredoka-VariableFont.woff2") format("woff2-variations");
  font-weight: 300 700; /* Define el rango completo */
  font-style: normal;
  font-display: swap; /* Importante para el rendimiento (evita el FOUT) */
}

@font-face {
  font-family: "LuckiestGuy";
  src: url("../fonts/LuckiestGuy-Regular.woff2") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fonts */
  --font-main: "Fredoka", sans-serif;
  --font-seccondary: "LuckiestGuy", sans-serif;

  /* Colors */
  --color-primary: oklch(77.889% 0.20471 128.459);
  --color-dark: oklch(54.863% 0.00006 271.152);
  --color-seccondary: oklch(87.991% 0.18019 94.375);
  --color-complementary: oklch(72.762% 0.18453 52.95);
  --color-contrast: oklch(53.639% 0.16127 252.341);
  --color-light: oklch(100% 0.00011 271.152);

  /* Unit */
  --space-unit: 1rem;

  /* Paddings */
  --p-sm: calc(var(--space-unit) * 0.5); /* 8px */
  --p-md: var(--space-unit);
  --p-lg: calc(var(--space-unit) * 1.5); /* 24px */
  --p-xl: calc(var(--space-unit) * 3); /* 48px */

  /* Margins */
  --m-sm: calc(var(--space-unit) * 0.5); /* 8px */
  --m-md: var(--space-unit);
  --m-lg: calc(var(--space-unit) * 1.5); /* 24px */
  --m-xl: calc(var(--space-unit) * 3); /* 48px */

  /* Transition */
  --transition-base-time: 0.3s;
  --transition-long-time: 0.8s;
  --transition-bounce-style: cubic-bezier(0.3, 1.55, 0.47, 0.74);

  /* Filters */
  --bg-blur: 8;
}