/* ============================================================
   TOKENS — el contrato visual de setlist.pw (Fase 5 del roadmap).

   Un solo archivo, consumido por la landing y la app. Si los dos
   productos leen de acá, la coherencia sale sola. La fuente de las
   decisiones es docs/design/direccion-visual-setlist.md: este
   archivo solo las transcribe, no las discute.

   Dirección: "un afiche de recital, no una app oscura".
   Cero sombras, cero gradientes, cero texturas, radios chicos.
   Oscuro es el modo por defecto, no un modo alternativo.
   ============================================================ */

:root{

  /* ---------- Neutrales (9) — negro cálido ----------
     Temperatura de papel de afiche, no gris azulado de app.
     El texto nunca es blanco puro: #F2F0EC no vibra sobre negro. */
  --neutral-950:#0D0C0B;
  --neutral-900:#161513;
  --neutral-800:#1F1D1B;
  --neutral-700:#2E2B28;
  --neutral-600:#4A4642;
  --neutral-500:#6E6862;
  --neutral-400:#948D85;
  --neutral-200:#C9C3BA;
  --neutral-50: #F2F0EC;

  /* ---------- Marca y semánticos ----------
     El acento es UNO y se usa con avaricia: un elemento acentuado
     por pantalla. Nunca es texto de lectura chico (~6:1 sobre fondo:
     alcanza para bloques, bordes, indicadores y títulos).
     El error nunca va solo como color: siempre con ícono o texto. */
  --acento:#FF5A1F;
  --error: #F04438;
  --exito: #5A9E6F;
  --aviso: #E8B931;
  --info:  var(--neutral-400);

  /* ---------- Roles de superficie y texto ---------- */
  --fondo:            var(--neutral-950);
  --superficie:       var(--neutral-900);
  --superficie-2:     var(--neutral-800);
  --borde:            var(--neutral-700);
  --borde-foco:       var(--neutral-600);
  --texto:            var(--neutral-50);
  --texto-suave:      var(--neutral-200);
  --texto-sec:        var(--neutral-400);
  /* Más claro que el neutral-500: como TEXTO, el 500 da 3.6:1 y no pasa
     AA (4.5) en los tamaños chicos donde se usa. El 500 sigue para lo
     decorativo (bordes de foco, desactivado); esto es solo para leer. */
  --texto-ter:        #8B857D;

  /* ---------- Tipografía: Archivo variable ----------
     Una sola familia (Omnibus-Type, OFL 1.1); el eje de ancho hace
     el trabajo de dos. La regla: A donde convencés, B donde tocás. */
  --fuente:"Archivo", -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Ejes por rol (van en font-variation-settings) */
  --ejes-marca:  'wght' 900, 'wdth' 75;   /* wordmark, hero de landing */
  --ejes-display:'wght' 800, 'wdth' 75;   /* títulos, nombre de canción en vivo */
  --ejes-ui:     'wght' 500, 'wdth' 100;  /* botones, labels, navegación */
  --ejes-cuerpo: 'wght' 400, 'wdth' 100;  /* letra, acordes, texto largo */

  /* Escala (6 tamaños, con el salto grande en el medio a propósito) */
  --tipo-hero:   56px;
  --tipo-display:44px;
  --tipo-titulo: 28px;
  --tipo-cuerpo: 17px;
  --tipo-ui:     15px;
  --tipo-meta:   12px;

  /* Tracking: el wordmark cierra, los metadatos abren.
     Mayúscula + tracking abierto SOLO para metadatos (etiquetas,
     contadores, "sigue:"), nunca para contenido. */
  --tracking-marca:-0.02em;
  --tracking-meta: 0.06em;

  /* ---------- Wordmark (Fase 4 cerrada, la 17 del laboratorio) ----------
     `setlist` en --texto, `.pw` en --acento, siempre minúscula.
     Donde aparece, el .pw naranja ES el acento de esa pantalla. */

  /* ---------- Espaciado ---------- */
  --esp-1:4px;
  --esp-2:8px;
  --esp-3:12px;
  --esp-4:16px;
  --esp-5:24px;
  --esp-6:32px;
  --esp-7:48px;
  --esp-8:64px;   /* solo landing: donde el afiche se despliega entero */

  /* ---------- Radios y sombras ----------
     El afiche es plano porque es impreso. El token de sombra existe
     para que ningún componente lo invente por su cuenta: va en none. */
  --radio:4px;
  --radio-chico:2px;
  --sombra:none;

  /* ---------- Quiebres (informativos) ----------
     Las media queries no pueden leer variables: estos números viven
     acá como registro y se copian a mano donde hagan falta. */
  --quiebre-tablet:768px;
  --quiebre-escritorio:1080px;
}