/* Sistema visual UI-21: la profundidad comunica función, no decoración. */
:root {
  /* Color y superficies. */
  --fondo: #e7e8eb;
  --superficie: #e7e8eb;
  --superficie-elevada: #e7e8eb;
  --superficie-hundida: #e7e8eb;
  --separador: #cfd1d6;
  --borde-sutil: transparent;
  --borde-hover: rgba(32, 39, 52, 0.12);

  /* Texto, acento y señales de estado. */
  --texto-principal: #202734;
  --texto-secundario: #596575;
  --texto-tenue: #7b8794;
  --acento: #0758b8;
  --bien: #246a4b;
  --bien-suave: #e6f4ec;
  --atencion: #885000;
  --atencion-suave: #fff3dc;
  --error: #b83232;
  --error-suave: #fdecec;

  /* par: --texto-principal sobre --superficie 4.5 */
  /* par: --texto-secundario sobre --superficie 4.5 */
  /* par: --acento sobre --superficie 4.5 */
  /* par: --bien sobre --superficie 4.5 */
  /* par: --atencion sobre --superficie 4.5 */
  /* par: --error sobre --superficie 4.5 */

  /* Profundidad: N0, N1, N2, N-1 y N3. */
  --sombra-n0: none;
  --sombra-n1:
    -5px -5px 10px rgba(255, 255, 255, 0.82),
    5px 5px 12px rgba(153, 160, 171, 0.38),
    1px 2px 4px rgba(120, 128, 140, 0.1);
  --sombra-n2:
    -8px -8px 16px rgba(255, 255, 255, 0.82),
    8px 8px 18px rgba(153, 160, 171, 0.46),
    2px 3px 6px rgba(120, 128, 140, 0.12);
  --sombra-hundida:
    inset 5px 5px 10px rgba(151, 158, 169, 0.27),
    inset -5px -5px 10px rgba(255, 255, 255, 0.72);
  --sombra-n3:
    -10px -10px 20px rgba(255, 255, 255, 0.88),
    10px 10px 22px rgba(150, 157, 169, 0.5),
    3px 4px 7px rgba(115, 123, 136, 0.14);

  /* Radios y retícula de 4 px. */
  --radio-sm: 16px;
  --radio-campo: 20px;
  --radio-md: 24px;
  --radio-tarjeta: 28px;
  --radio-contenedor: 36px;
  --radio-modal: 32px;
  --radio-hoja: 32px 32px 0 0;
  --radio-pill: 999px;
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-5: 24px;
  --espacio-6: 32px;
  --espacio-7: 40px;
  --espacio-8: 48px;
  --espacio-9: 64px;

  /* Escala tipográfica móvil. */
  --texto-caption: 0.75rem;
  --texto-sm: 0.8125rem;
  --texto-base: 1rem;
  --texto-destacado: 1.25rem;
  --texto-titulo-secundario: 1.375rem;
  --texto-titulo-principal: 1.75rem;
  --texto-frase: 2.25rem;

  /* Movimiento funcional. */
  --movimiento-instant: 90ms cubic-bezier(0.2, 0, 0, 1);
  --movimiento-rapido: 120ms cubic-bezier(0.2, 0, 0, 1);
  --movimiento-estandar: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --movimiento-enfasis: 240ms cubic-bezier(0.22, 1, 0.36, 1);
  --movimiento-overlay: 280ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Alias para las pantallas existentes, sin cambiar sus flujos. */
  --perla: var(--fondo);
  --blanco: var(--superficie-elevada);
  --crema: var(--superficie);
  --gris-claro: var(--separador);
  --superficie-alta: var(--superficie-elevada);
  --borde-limite: var(--acento);
  --sombra-superficie: var(--sombra-n1);
}