: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 */

  /* =========================
     TIPOGRAFÍA
     ========================= */
  --title-font: 'Montserrat', 'Anton', sans-serif;
  --text-font: 'Cabin', 'Inter', sans-serif;
}

  

.tabler-icon {
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
  flex: 0 0 auto;
  object-fit: contain;
  vertical-align: -0.2em;
  transition: filter 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.tabler-icon.icon-light {
  filter: brightness(0) invert(1);
}

.tabler-icon.icon-muted {
  filter: brightness(0) saturate(100%) invert(63%) sepia(7%) saturate(133%) hue-rotate(202deg) brightness(91%) contrast(83%);
}

.tabler-icon.icon-danger {
  filter: brightness(0) saturate(100%) invert(31%) sepia(94%) saturate(2060%) hue-rotate(351deg) brightness(93%) contrast(96%);
}