/*
   tokens.css - Variables de diseno de Persycom.
   Base del futuro tema compartido entre PersyPortal y el Presupuestador.
   Solo variables: los estilos viven en site.css.
*/
:root {
    /* Color de marca */
    --color-acento: #b91c1c;
    --color-acento-oscuro: #991b1b;
    --color-acento-suave: #fef2f2;
    --color-acento-borde: #fecaca;

    /* Tinta y neutros calidos */
    --color-tinta: #1c1917;
    --color-tinta-suave: #44403c;
    --color-texto: #292524;
    --color-texto-secundario: #57534e;
    --color-texto-terciario: #78716c;
    --color-borde: #e7e5e4;
    --color-borde-fuerte: #d6d3d1;
    --color-fondo: #f5f5f4;
    --color-superficie: #ffffff;
    --color-superficie-suave: #fafaf9;

    /* Superficies oscuras (cabeceras de tabla, panel de acceso) */
    --color-oscuro: #1c1917;
    --color-oscuro-texto: #fafaf9;
    --color-oscuro-texto-suave: #d6d3d1;

    /* Estados de pedido */
    --estado-recibido-fondo: #f5f5f4;
    --estado-recibido-texto: #44403c;
    --estado-recibido-barra: #a8a29e;
    --estado-fabricacion-fondo: #fef3c7;
    --estado-fabricacion-texto: #92400e;
    --estado-fabricacion-barra: #f59e0b;
    --estado-preparado-fondo: #dbeafe;
    --estado-preparado-texto: #1e40af;
    --estado-preparado-barra: #3b82f6;
    --estado-servido-fondo: #dcfce7;
    --estado-servido-texto: #166534;
    --estado-servido-barra: #22c55e;

    /* Tipografia */
    --fuente-base: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Radios */
    --radio-s: 8px;
    --radio-m: 12px;
    --radio-l: 16px;
    --radio-pastilla: 999px;

    /* Sombras */
    --sombra-1: 0 1px 2px rgb(28 25 23 / 0.05);
    --sombra-2: 0 1px 3px rgb(28 25 23 / 0.04), 0 8px 24px rgb(28 25 23 / 0.06);
    --sombra-3: 0 2px 6px rgb(28 25 23 / 0.06), 0 16px 40px rgb(28 25 23 / 0.10);

    /* Espaciado */
    --espacio-1: 4px;
    --espacio-2: 8px;
    --espacio-3: 12px;
    --espacio-4: 16px;
    --espacio-5: 24px;
    --espacio-6: 32px;
    --espacio-7: 48px;
    --espacio-8: 64px;

    /* Movimiento */
    --transicion-rapida: 140ms ease;
    --transicion-media: 220ms ease;

    /* Disposicion */
    --ancho-contenedor: 1120px;
    --alto-cabecera: 60px;
}

@media (min-width: 900px) {
    :root {
        --alto-cabecera: 68px;
    }
}