/* AMEYAL — tokens del sistema visual
 *
 * Fuente de verdad: marca/DESIGN-SYSTEM.md
 * Los siete colores de la paleta no se amplían. Los tonos intermedios que
 * aparecen aquí son el mismo Forest Ink con alfa: bordes y reglas, nunca
 * rellenos ni texto.
 *
 * Este archivo define el sistema. No está conectado a la web todavía.
 */

:root {
  /* --- Paleta -------------------------------------------------------- */
  --ameyal-forest-ink: #15332d;
  --ameyal-evergreen: #1f5549;
  --ameyal-honey: #d69b42;
  --ameyal-sage-mist: #ccd7cc;
  --ameyal-natural-linen: #f5f0e7;
  --ameyal-black: #161a18;
  --ameyal-white: #ffffff;

  /* --- Roles --------------------------------------------------------- */
  --superficie: var(--ameyal-natural-linen);   /* mesa de trabajo */
  --superficie-alta: var(--ameyal-white);      /* hoja de informe */
  --superficie-evidencia: var(--ameyal-sage-mist);
  --superficie-profunda: var(--ameyal-forest-ink);

  --texto: var(--ameyal-forest-ink);
  --texto-suave: var(--ameyal-evergreen);
  --texto-inverso: var(--ameyal-natural-linen);
  --texto-inverso-suave: var(--ameyal-sage-mist);

  --acento: var(--ameyal-honey);               /* señal escasa: 2–6 % */

  /* Honey sobre Natural Linen da 2.14:1: no llega al 3:1 que WCAG pide a un
   * indicador de foco. El anillo se construye en dos capas —Honey pegado al
   * control, Forest Ink por fuera— y el contraste lo aporta la capa oscura
   * (11.99:1). Honey conserva su papel de señal sin sostener la accesibilidad. */
  --foco-interior: var(--ameyal-honey);
  --foco-exterior: var(--ameyal-forest-ink);

  --borde: rgba(21, 51, 45, 0.18);
  --borde-fuerte: rgba(21, 51, 45, 0.32);
  --borde-inverso: rgba(245, 240, 231, 0.22);
  --borde-inverso-fuerte: rgba(245, 240, 231, 0.38);

  /* --- Tipografía ---------------------------------------------------- */
  --fuente-display: "Bricolage Grotesque", "Work Sans", system-ui, sans-serif;
  --fuente-texto: "Work Sans", system-ui, -apple-system, sans-serif;
  /* Monoespaciada del sistema: sólo coordenadas, códigos y claves. */
  --fuente-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Escala reescrita el 18 de agosto de 2026. La anterior llegaba a 104 px de
   * titular y aplanaba todo lo demás: en móvil el h1 de portada y los seis h2
   * salían a 28 px idénticos, sin un solo salto de tamaño. Ahora cada escalón
   * decide su tamaño, su interlineado, su tracking y su peso por separado. */
  --display-xl: clamp(2.5rem, 5vw, 4rem);
  --display-l: clamp(1.875rem, 3.1vw, 2.5rem);
  --display-m: clamp(1.5rem, 2.2vw, 1.75rem);
  /* El número que decide: precio y conteo. Manda sobre la prosa que lo rodea. */
  --cifra: clamp(1.375rem, 2vw, 1.625rem);
  --titulo: 1.5rem;
  --subtitulo: 1.25rem;
  --cuerpo-l: 1.0625rem;
  --cuerpo: 1rem;
  --cuerpo-s: 0.875rem;
  --dato: 0.875rem;
  --rotulo: 0.75rem;

  --alto-display: 0.96;
  --alto-xl: 1.02;
  --alto-l: 1.06;
  --alto-m: 1.15;
  --alto-titulo: 1.2;
  --alto-cuerpo: 1.6;
  --alto-dato: 1.4;

  --tracking-display: -0.022em;
  --tracking-xl: -0.035em;
  --tracking-l: -0.026em;
  --tracking-m: -0.018em;
  --tracking-s: -0.005em;
  --tracking-cuerpo: 0;
  --tracking-dato: 0.01em;
  --tracking-rotulo: 0.14em;

  --peso-display: 500;
  --peso-titular: 700;
  --peso-cuerpo: 400;
  --peso-enfasis: 500;
  --peso-dato: 600;

  /* --- Espaciado (escala de 4) --------------------------------------- */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e6: 1.5rem;
  --e8: 2rem;
  --e12: 3rem;
  --e16: 4rem;
  --e24: 6rem;
  --e32: 8rem;
  --e44: 11rem;

  /* --- Retícula ------------------------------------------------------ */
  --columnas: 12;
  --margen: 4rem;
  --canal: 1.5rem;
  --ancho-maximo: 88rem;
  --medida-lectura: 68ch;   /* 48–72 caracteres por línea */

  /* --- Trazo y forma -------------------------------------------------- */
  --regla: 1px;
  --regla-fuerte: 1.5px;
  --radio: 0;               /* placas rectangulares: sin esquinas blandas */
  --area-tactil: 44px;

  /* --- Movimiento ----------------------------------------------------- */
  --duracion-corta: 160ms;
  --duracion: 220ms;
  --duracion-larga: 260ms;
  --curva: cubic-bezier(0.2, 0, 0, 1);
  /* Gesto de marca: el punto Honey recorre la línea de procedencia una vez. */
  --duracion-procedencia: 1400ms;

  /* Salida exponencial, sin sobrepaso: una placa no oscila. */
  --curva-salida: cubic-bezier(0.16, 1, 0.3, 1);
  --curva-corte: cubic-bezier(0.85, 0, 0.15, 1);
  --duracion-revelado: 240ms;
  --escalon: 55ms;
  --recorrido: 12px;

  /* Aire de banda. Antes eran 102.4 px por lado a 1280 y el ancho de la
   * ventana gobernaba el alto de la página: 1,024 px de nada entre secciones,
   * el 18.6% del documento. El separador ahora lo lleva el trazo. */
  --banda-aire: clamp(var(--e8), 3.8vw, var(--e16));

  --foco-grosor: 2px;
  --foco-separacion: 2px;

  /* --- Foco ------------------------------------------------------------ */
  --foco-grosor: 2px;
  --foco-separacion: 2px;
}

/* Anillo de foco del sistema. Se aplica con :focus-visible para que el ratón
 * no lo dispare, y nunca se elimina sin sustituirlo. */
.ameyal-foco:focus-visible,
.ameyal :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--foco-grosor) solid var(--foco-interior);
  outline-offset: var(--foco-separacion);
  box-shadow: 0 0 0 calc(var(--foco-separacion) + 2 * var(--foco-grosor))
    var(--foco-exterior);
}

/* Superficie profunda: los roles se invierten dentro del campo oscuro. */
.ameyal-profundo {
  --superficie: var(--ameyal-forest-ink);
  --superficie-alta: var(--ameyal-evergreen);
  --texto: var(--ameyal-natural-linen);
  --texto-suave: var(--ameyal-sage-mist);
  --borde: var(--borde-inverso);
  --borde-fuerte: var(--borde-inverso-fuerte);
  --foco-exterior: var(--ameyal-natural-linen);
}

@media (max-width: 47.9375rem) {
  :root {
    --columnas: 4;
    --margen: 1.25rem;
    --canal: 1rem;
  }
}

/* Ningún estado depende sólo del movimiento: con la preferencia activa, la
 * línea de procedencia aparece terminada y el punto ya está en su destino. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duracion-corta: 1ms;
    --duracion: 1ms;
    --duracion-larga: 1ms;
    --duracion-procedencia: 1ms;
  }
}

/* Candado de movimiento. Las media queries de `styles.css` envuelven cada
 * declaración, y además los tokens colapsan aquí: ningún retraso se escribe
 * como literal, así que con la preferencia activa no queda un solo escalonado
 * capaz de armar la página a saltos. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duracion-corta: 1ms;
    --duracion: 1ms;
    --duracion-larga: 1ms;
    --duracion-revelado: 1ms;
    --duracion-procedencia: 1ms;
    --escalon: 0ms;
    --recorrido: 0px;
  }
}