/* =========================================================
   TOKENS DE DISEÑO
   Cambia colores, tipografías, tamaños y espacios desde aquí:
   todo el sitio los usa.
   ========================================================= */
@import url("fuentes.css");

:root {
  /* Colores */
  --color-fondo: #7d7ab0;
  --color-panel: #a4a2c8;        /* menú y tarjetas */
  --color-panel-suave: rgba(255, 255, 255, 0.08);
  --color-texto: #ffffff;
  --color-texto-suave: rgba(255, 255, 255, 0.78);
  --color-linea: rgba(255, 255, 255, 0.35);

  /* Tipografías */
  --fuente-display: "Unica One", system-ui, sans-serif;
  --fuente-texto: "Nunito", system-ui, sans-serif;

  /* Escala tipográfica (se adapta al ancho de pantalla) */
  --t-nombre: clamp(1.9rem, 3.6vw, 3.4rem);
  --t-menu-boton: clamp(1.5rem, 2.8vw, 2.6rem);
  --t-menu-item: clamp(2.4rem, 4.2vw, 3.9rem);
  --t-h1: clamp(2.4rem, 6vw, 5rem);
  --t-h2: clamp(1.7rem, 3.4vw, 2.6rem);
  --t-h3: clamp(1.3rem, 2.2vw, 1.7rem);
  --t-cuerpo: clamp(1rem, 1.15vw, 1.15rem);
  --t-pequeno: 0.9rem;

  /* Espacios */
  --margen: clamp(1.25rem, 5.3vw, 5rem);   /* margen lateral del sitio */
  --espacio-xs: 0.5rem;
  --espacio-s: 1rem;
  --espacio-m: 2rem;
  --espacio-l: 4rem;
  --alto-header: clamp(5rem, 11vw, 9rem);
  --ancho-lectura: 42rem;

  /* Formas */
  --radio-panel: 2rem;
  --radio-tarjeta: 1.25rem;

  /* Menú */
  --menu-ancho: clamp(22rem, 40vw, 44rem);
  --menu-duracion: 0.45s;
}