/*
 * Tokens de diseño: TODOS los colores, tipografías, tamaños y espaciados de la
 * interfaz viven aquí. Cuando llegue el design system de Vira & Vasa, solo se
 * sustituyen estos valores; app.css no lleva ningún valor fijo.
 */
:root {
  /* Colores */
  --color-fondo: #f5f3ee;
  --color-superficie: #ffffff;
  --color-superficie-2: #faf9f6;
  --color-texto: #1f2328;
  --color-texto-suave: #5d646d;
  --color-borde: #e3dfd6;
  --color-acento: #1d5c86;
  --color-acento-texto: #ffffff;
  --color-acento-suave: #e1edf6;
  --color-palabra-activa: #ffe28a;
  --color-palabra-hover: #eef3f7;
  --color-pausa: #b8b2a5;
  --color-aviso-revisar: #c2410c;
  --color-aviso-nombre: #6d4bc4;
  --color-onda: #c3ccd4;
  --color-onda-progreso: #1d5c86;
  --color-tramo-musica: rgba(29, 92, 134, 0.08);
  --color-cabezal: #1f2328;
  --color-error: #b42318;
  --color-comentario: #0f7b6c;
  --color-comentario-suave: rgba(15, 123, 108, 0.16);
  --color-seleccion: rgba(255, 196, 0, 0.35);
  --color-aprobada: #1a7f37;
  --color-cambios: #b26b00;
  --color-rehacer: #b42318;
  --color-estado-cerrado: #8c939b;

  /* Tipografía */
  --fuente-interfaz: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --fuente-lectura: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --fuente-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --tam-pequeno: 0.82rem;
  --tam-texto: 0.95rem;
  --tam-lectura: 1.2rem;
  --tam-titulo: 1.3rem;
  --tam-titulo-grande: 1.7rem;
  --peso-normal: 400;
  --peso-medio: 560;
  --interlineado: 1.45;
  --interlineado-lectura: 1.8;

  /* Espaciado */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;

  /* Formas */
  --radio: 8px;
  --radio-pequeno: 5px;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 10px rgba(0, 0, 0, 0.04);

  /* Medidas de la interfaz */
  --ancho-pagina: 1180px;
  --ancho-lectura: 66ch;
  --alto-onda: 96px;
  --ancho-lateral: 290px;
}