:root {
  /* =========================
     Primarios (base neutra)
     ========================= */
  --primary-100: #000000; /* Negro absoluto, texto principal */
  --primary-200: #1c1c1c; /* Negro suave para headers / nav */
  --primary-300: #2e2e2e; /* Gris oscuro para cards */

  /* =========================
     Accentos (iridiscencia)
     ========================= */
  --accent-100: #8b56ec; /* Violeta metálico (key accent) */
  --accent-200: #ff7aa2; /* Rosa iridiscente */
  --accent-300: #5fd3ff; /* Azul perlado */

  /* =========================
     Texto
     ========================= */
  --text-100: #000000; /* Texto principal sobre fondo claro */
  --text-200: #4a4a4a; /* Texto secundario */
  --text-300: #8a8a8a; /* Texto muted */

  /* =========================
     Fondos
     ========================= */
  --bg-100: #ffffff; /* Fondo principal */
  --bg-200: #f6f6f8; /* Secciones */
  --bg-300: #ededf1; /* Cards / divisiones */
}

  

@font-face {
    font-family: "Font Awesome 6 Free";
    font-display: swap;
    src: local("Font Awesome 6 Free");
}

@font-face {
    font-family: "Font Awesome 6 Brands";
    font-display: swap;
    src: local("Font Awesome 6 Brands");
}

@font-face {
    font-family: "Font Awesome 6 Pro";
    font-display: swap;
    src: local("Font Awesome 6 Pro");
}