/* Sistema de diseño · Weasy R&D
 *
 * La paleta NO se inventó aquí: sale de docs/weasy/social/generar_carrusel.py, que ya
 * traía las razones de contraste calculadas. El ámbar tiene DOS variantes porque el
 * mismo tono no pasa contraste sobre los dos fondos — usar #C8842A sobre papel es el
 * error que esa distinción existe para evitar.
 *
 * La escala tipográfica sale de medir las referencias que eligió el dueño (Playwright,
 * 2026-08-30): thinkingmachines h1 47px/400 · anthropic 60.9px/700 · openai 64px/500.
 * El rango 47-64px es el registro de ese nivel; por debajo el sitio se lee a plantilla.
 */

:root {
  /* ── color · marca ─────────────────────────────────────────────────────── */
  --tinta: #14181F;
  --tinta-2: #1C222B;          /* superficies elevadas sobre tinta */
  --tinta-3: #2C333D;          /* bordes y separadores en oscuro */
  --papel: #F7F5F1;
  --papel-2: #FFFFFF;          /* tarjetas sobre papel */
  --papel-3: #EDE9E2;          /* separadores en claro */

  --acento: #C8842A;           /* SOBRE TINTA · 5.75:1 */
  --acento-claro: #8F5E1E;     /* SOBRE PAPEL · 5.09:1 — no intercambiables */
  --acento-tenue: rgba(200, 132, 42, 0.12);

  --suave: #5A6472;            /* texto secundario sobre papel */
  --suave-osc: #8A93A0;        /* texto secundario sobre tinta */
  --gris-borde: #D8D2C8;

  /* roles semánticos — el resto de la hoja usa ESTOS, no los de arriba */
  --fondo: var(--papel);
  --fondo-elevado: var(--papel-2);
  --texto: var(--tinta);
  --texto-2: var(--suave);
  --borde: var(--gris-borde);
  --marca: var(--acento-claro);
  /* El botón necesita ROL propio: escrito como `--tinta` crudo, en modo oscuro el fondo
   * del botón coincide con el fondo de la página y la pastilla desaparece. */
  --boton-fondo: var(--tinta);
  --boton-texto: var(--papel);
  --boton-acento-fondo: var(--acento-claro);
  --boton-acento-texto: #FFFFFF;

  /* ── tipografía ────────────────────────────────────────────────────────── */
  /* Display en serif porque es el registro de las tres referencias: TM y Anthropic
   * llevan serif en los titulares, y es lo que separa «laboratorio» de «SaaS».
   * Ubuntu se conserva del sistema de marca para interfaz y cuerpo. */
  --fuente-display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --fuente-ui: Ubuntu, "Helvetica Neue", Arial, system-ui, sans-serif;
  --fuente-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code", monospace;

  /* escala mayor-tercera acotada por viewport · el h1 aterriza en 44-68px */
  --t-hero: clamp(2.75rem, 1.6rem + 4.6vw, 4.25rem);
  --t-h2: clamp(2rem, 1.35rem + 2.6vw, 3rem);
  --t-h3: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  --t-lead: clamp(1.125rem, 1.02rem + 0.42vw, 1.3125rem);
  --t-cuerpo: 1.0625rem;
  --t-pequeno: 0.9375rem;
  --t-micro: 0.8125rem;

  --peso-display: 400;         /* el serif de display pesa poco a propósito */
  --peso-ui: 400;
  --peso-fuerte: 500;
  --peso-max: 700;

  --interlinea-hero: 1.06;
  --interlinea-titulo: 1.14;
  --interlinea-cuerpo: 1.62;
  --tracking-hero: -0.021em;   /* TM medía -0.01em; el serif grande pide algo más */
  --tracking-etiqueta: 0.09em;

  /* ── espacio · escala de 4px con saltos que se notan ───────────────────── */
  --e1: 0.25rem;  --e2: 0.5rem;   --e3: 0.75rem;  --e4: 1rem;
  --e5: 1.5rem;   --e6: 2rem;     --e7: 3rem;     --e8: 4rem;
  --e9: 6rem;     --e10: 8rem;    --e11: 11rem;

  /* Las franjas respiran como las referencias: mucho aire vertical, poco ruido. */
  --franja-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --ancho-max: 1200px;
  --ancho-texto: 68ch;         /* medida de lectura, no de contenedor */

  /* ── forma ─────────────────────────────────────────────────────────────── */
  --r-chico: 6px;
  --r-medio: 12px;
  --r-tarjeta: 18px;
  --r-bloque: 28px;            /* la tarjeta oscura grande, como la de Anthropic */
  --r-pastilla: 999px;

  --sombra-sutil: 0 1px 2px rgba(20, 24, 31, 0.04), 0 2px 8px rgba(20, 24, 31, 0.04);
  --sombra-tarjeta: 0 2px 4px rgba(20, 24, 31, 0.04), 0 12px 32px rgba(20, 24, 31, 0.07);

  /* ── movimiento ────────────────────────────────────────────────────────── */
  /* Las tres referencias animan MUY poco: entradas suaves y nada que se repita en
   * bucle. Un sitio de ticket alto que se mueve mucho se lee a plantilla. */
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --curva-salida: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-rapida: 160ms;
  --dur-media: 320ms;
  --dur-lenta: 620ms;
}

/* Modo oscuro: NO es una inversión automática. El ámbar cambia de variante porque
 * sobre tinta el que pasa contraste es el otro. Invertir sin esto rompe la
 * accesibilidad justo en el color de marca. */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: var(--tinta);
    --fondo-elevado: var(--tinta-2);
    --texto: var(--papel);
    --texto-2: var(--suave-osc);
    --borde: var(--tinta-3);
    --marca: var(--acento);
    --boton-fondo: var(--papel);
    --boton-texto: var(--tinta);
    /* El ámbar de papel no pasa contraste sobre tinta: en oscuro va el otro. */
    --boton-acento-fondo: var(--acento);
    --boton-acento-texto: var(--tinta);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-rapida: 1ms; --dur-media: 1ms; --dur-lenta: 1ms; }
}