/* Orden de las capas para toda la hoja: cada fichero solo rellena la suya. */
@layer tokens, base, layout, componentes, utilidades;

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Monocromática: un único tono, el rojo de la cinta. Mesa, papel y tinta son ese tono casi sin
       saturación; el error es el mismo tono saturado. */
    --tono: 0;

    --mesa: light-dark(hsl(var(--tono) 7% 90%), hsl(var(--tono) 7% 9%));
    --papel: light-dark(hsl(var(--tono) 14% 99%), hsl(var(--tono) 7% 14%));
    --renglon: light-dark(hsl(var(--tono) 10% 95%), hsl(var(--tono) 7% 18%));
    --tinta: light-dark(hsl(var(--tono) 12% 11%), hsl(var(--tono) 12% 92%));
    --tinta-intensa: light-dark(hsl(var(--tono) 10% 24%), hsl(var(--tono) 10% 80%));
    --tinta-suave: light-dark(hsl(var(--tono) 6% 33%), hsl(var(--tono) 6% 72%));
    --guia: light-dark(hsl(var(--tono) 5% 43%), hsl(var(--tono) 5% 62%));
    --borde: light-dark(hsl(var(--tono) 6% 46%), hsl(var(--tono) 6% 52%));
    --cinta: light-dark(hsl(var(--tono) 72% 40%), hsl(var(--tono) 75% 68%));
    --tinte-cinta: light-dark(hsl(var(--tono) 70% 95%), hsl(var(--tono) 40% 17%));

    /* Escala de calor del teclado de fallos: el mismo tono, cada vez más saturado */
    --calor-0: light-dark(hsl(var(--tono) 8% 97%), hsl(var(--tono) 6% 19%));
    --calor-1: light-dark(hsl(var(--tono) 70% 92%), hsl(var(--tono) 40% 24%));
    --calor-2: light-dark(hsl(var(--tono) 70% 83%), hsl(var(--tono) 48% 31%));
    --calor-3: light-dark(hsl(var(--tono) 68% 66%), hsl(var(--tono) 55% 42%));
    --calor-4: var(--cinta);
    --sobre-calor-4: light-dark(hsl(var(--tono) 14% 99%), hsl(var(--tono) 7% 9%));

    --fuente-hoja: "Courier New", Courier, "Courier 10 Pitch", "Nimbus Mono PS", "Liberation Mono", ui-monospace, monospace;
    --fuente-interfaz: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;

    --razon: 1.25; /* tercera mayor */
    --paso--1: calc(1rem / var(--razon));
    --paso-0: 1rem;
    --paso-1: calc(var(--paso-0) * var(--razon));
    --paso-2: calc(var(--paso-1) * var(--razon));
    --paso-3: calc(var(--paso-2) * var(--razon));
    --paso-4: calc(var(--paso-3) * var(--razon));
    --paso-5: calc(var(--paso-4) * var(--razon));

    --peso-normal: 400;
    --peso-medio: 600;
    --peso-fuerte: 700;
    --interlineado: 1.5;

    /* Espacio: escala en rem; solo el exterior crece con la ventana */
    --espacio-1: 0.25rem;
    --espacio-2: 0.5rem;
    --espacio-3: 1rem;
    --espacio-4: 1.5rem;
    --espacio-5: clamp(1.5rem, 1rem + 2.5vw, 3rem);
    --espacio-6: clamp(2rem, 1rem + 5vw, 6rem); /* entre las dos columnas */
    --sangria: 0.75rem; /* margen interior común a muestra y campo */
    --ancho-maximo: 80rem;
    --ancho-columna: 44rem;
    --medida: 60ch;

    --radio: 0.125rem;
    --anillo: 3px;
    --hundimiento: 1px; /* botón pulsado */
    --control: 3rem; /* alto mínimo del botón: objetivo táctil holgado */
    --duracion: 150ms;
    --entrada: 240ms;
    --escalon: 60ms;
    --golpe: 140ms;
    --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}