/*
 * Tokens de diseño. Único sitio donde se declaran colores, tipografías y espaciados:
 * ningún componente escribe un valor a pelo. Si hace falta uno nuevo, se añade aquí.
 */
:root {
    /* Color. Paleta cálida y sobria: la foto de la receta es la protagonista,
       la interfaz no compite con ella. */
    --color-fondo: #fdfcfa;
    --color-superficie: #ffffff;
    --color-borde: #e2ddd5;
    --color-texto: #24201c;
    --color-texto-tenue: #6b625a;
    --color-acento: #b4541f;
    --color-acento-oscuro: #8c3f16;
    --color-error: #9b2226;
    --color-error-fondo: #fdf0f0;
    --color-exito: #2d6a4f;
    --color-exito-fondo: #eef6f1;

    /* Tipografía. Pila del sistema: cero descarga de fuentes, que en WebAssembly
       ya se paga bastante en el arranque. */
    --fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Cuerpo generoso: se lee a distancia de brazo, con el móvil en la encimera. */
    --texto-base: 1.0625rem;
    --texto-pequeno: 0.9375rem;
    --texto-titulo: 1.5rem;
    --interlineado: 1.6;

    /* Espaciado en escala, para que los márgenes no se elijan al azar. */
    --espacio-1: 0.25rem;
    --espacio-2: 0.5rem;
    --espacio-3: 0.75rem;
    --espacio-4: 1rem;
    --espacio-5: 1.5rem;
    --espacio-6: 2rem;
    --espacio-7: 3rem;

    --radio: 0.5rem;
    --radio-pequeno: 0.375rem;

    --sombra: 0 1px 2px rgb(36 32 28 / 6%), 0 4px 12px rgb(36 32 28 / 6%);

    /* Área táctil mínima cómoda con las manos ocupadas. */
    --altura-tactil: 3rem;

    /*
     * Dos anchuras, no una.
     *
     * La estrecha se fijó en la feature 002, cuando las únicas pantallas eran
     * formularios de alta e inicio de sesión: ahí una columna corta se lee mejor
     * y evita campos de texto absurdamente largos.
     *
     * Con el recetario, la ficha y la tabla de ingredientes esa misma anchura se
     * quedó corta y en pantalla grande parecía la versión de móvil estirada. El
     * contenido general usa ahora la ancha; las pantallas de cuenta siguen con la
     * estrecha mediante `.pagina-estrecha`.
     */
    --ancho-contenido: 46rem;
    --ancho-formulario: 26rem;
}