/* Rompe el Ciclo · tokens de diseño
   Dirección: BARRO. Cerámica hecha a mano, rota y reparada con oro.
   El sistema completo está documentado en docs/DESIGN.md.

   Tres reglas que no se negocian:
     1. El oro es la grieta. Aparece en dos sitios y en ninguno más.
     2. No hay color de error, de aviso ni de éxito. Es deliberado.
     3. Ningún radio es uniforme. Una pieza torneada a mano no lo es. */

:root {
  /* --- materiales ---------------------------------------------------------
     Barro sin cocer. Nunca blanco, nunca gris: el gris es de otro material. */
  --barro:         #E9DECB;   /* el suelo por defecto */
  --barro-hondo:   #DCCDB5;   /* superficies hundidas, campos, carriles */
  --engobe:        #F3EBDC;   /* superficies elevadas, tarjetas, chips */
  --engobe-claro:  #FAF5EA;   /* la más alta, se usa poco */
  --linea:         #CDBCA3;   /* filetes de 1 px, es barro más oscuro */
  --filo:          #FFFCF5;   /* el brillo de 1 px del borde vidriado */

  /* --- tinta --------------------------------------------------------------
     Parda, nunca negro puro. El barro no conoce el negro puro. */
  --tinta:         #241C15;
  --tinta-suave:   #5A4B3C;
  --tinta-tenue:   #6E5F4C;   /* 4.63:1 sobre barro. El anterior, #91816E,
                                 daba 2.83 y no pasaba AA en los rótulos */

  /* --- los tres materiales con significado fijo ---------------------------
     Cambiar para qué sirve uno de estos rompe el sistema entero. */
  --terracota:     #A54D33;   /* lo que dice tu cabeza. Barro crudo, caliente.
                                 4.25:1: pasa AA en texto grande con holgura y
                                 aguanta bien si algún día baja de tamaño */
  --esmalte:       #2E6F6A;   /* lo que resultó ser verdad. Vidriado y frío */
  --oro:           #9C6C18;   /* la grieta. Solo el anillo y el arranque cerrado.
                                 3.45:1 sobre barro, suficiente para un trazo
                                 de interfaz. El #A8761E de la propuesta daba
                                 2.99 y se quedaba corto */

  /* Lavados, para fondos de bloque. Mismo material, muy diluido. */
  --terracota-lavado: #F2DED6;
  --esmalte-lavado:   #DCE9E5;

  /* --- tipografía ---------------------------------------------------------
     Fraunces para lo que se lee de verdad. Inter solo para texto mecánico. */
  --serif: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --sans:  'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-rotulo:   0.7rem;
  --t-menor:    0.875rem;
  --t-cuerpo:   1.0625rem;
  --t-guia:     clamp(1.35rem, 5.5vw, 1.75rem);
  --t-pregunta: clamp(1.75rem, 8vw, 2.5rem);
  --t-cifra:    clamp(3.5rem, 18vw, 5rem);

  /* --- espaciado, con nombres de oficio ---------------------------------- */
  --pizca:  0.25rem;
  --pulgar: 0.5rem;
  --palma:  0.875rem;
  --torno:  1.5rem;
  --banco:  2.5rem;
  --taller: 4rem;
  --margen-pantalla: clamp(1.25rem, 6vw, 2rem);

  /* --- radios irregulares -------------------------------------------------
     La regla más importante del sistema. Cuatro esquinas distintas, siempre
     las mismas, para que todo parezca hecho por la misma mano. */
  --rim-chico:  10px 13px 9px 12px;
  --rim:        14px 18px 12px 17px;
  --rim-grande: 22px 28px 20px 26px;

  /* --- movimiento ---------------------------------------------------------
     Lento y con peso. Nada rebota. Las cosas se posan. */
  --dur-corta:  180ms;
  --dur-media:  420ms;
  --dur-larga:  620ms;
  --peso: cubic-bezier(0.22, 0.61, 0.30, 1);

  --tap: 52px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-corta: 0ms; --dur-media: 0ms; --dur-larga: 0ms; }
}

/* --- compatibilidad con los nombres anteriores ---------------------------
   Las pantallas ya escritas usan los nombres de la primera dirección visual.
   Se remapean aquí en vez de reescribir catorce archivos: así el cambio de
   dirección es una decisión de sistema, que es donde debe vivir.
   Los nombres nuevos son los buenos; estos son puente. */
:root {
  --paper:        var(--barro);
  --paper-sunk:   var(--barro-hondo);
  --paper-raised: var(--engobe);
  --ink:          var(--tinta);
  --ink-soft:     var(--tinta-suave);
  --ink-faint:    var(--tinta-tenue);
  --rule:         var(--linea);

  --loop:         var(--terracota);
  --loop-wash:    var(--terracota-lavado);
  --exit:         var(--esmalte);
  --exit-wash:    var(--esmalte-lavado);
  --exit-bright:  var(--esmalte);

  --text-micro:  var(--t-rotulo);
  --text-small:  var(--t-menor);
  --text-body:   var(--t-cuerpo);
  --text-lead:   var(--t-guia);
  --text-ask:    var(--t-pregunta);
  --text-huge:   var(--t-cifra);

  --gap-xs: var(--pizca);
  --gap-s:  var(--pulgar);
  --gap-m:  var(--torno);
  --gap-l:  var(--banco);
  --gap-xl: var(--taller);
  --pad-screen: var(--margen-pantalla);

  --dur-fast:   var(--dur-corta);
  --dur-normal: var(--dur-media);
  --ease: var(--peso);

  --radius: 0;
}