:root {
    /* --- COLORES DE MARCA / ACCIÓN --- */
    --color-primary: #4981AF; /* Acciones principales: Botón "Cobrar", "Aceptar", "Pagar". */
    --color-primary-hover: #3A678C; /* Feedback: Color del botón primario al pasar el ratón o pulsar. */
    --color-primary-soft: #D6E4F0; /* Superficies: Fondo de la lista de productos del ticket o inputs de búsqueda. */
    --color-secondary: #74A3C9; /* Acciones secundarias: "Añadir Nota", "Cambio de Mesa", "Imprimir Proforma". */
    --color-accent: #F59E0B; /* Atención: Botones de "Descuento", "Modificadores" o avisos de cocina. */
    --color-danger: #EF4444; /* Crítico: Botón "Anular Ticket", "Borrar Producto" o "Cerrar Caja". */
    /* --- FONDOS Y SUPERFICIES --- */
    --color-app-bg: #F8FAFC; /* Fondo Base: El color de fondo de toda la ventana de la aplicación. */
    --color-surface: #FFFFFF; /* Contenedores: Fondo de las tarjetas de productos o modales. */
    --color-surface-alt: #F1F5F9;
    --color-sidebar-bg: rgb(44, 80, 109); /* Estructura: Fondo del menú lateral (Sidebar) para dar profundidad. */
    /* --- TEXTO --- */
    --color-text-base: #1E293B; /* Lectura: Nombres de productos, precios y textos generales. */
    --color-text-muted: #64748B;
    --color-text-white: #FFFFFF; /* Contraste: Texto dentro de botones azules o en el sidebar oscuro. */
    /* --- UI / ESTRUCTURA --- */
    --ui-border: #E2E8F0; /* División: Líneas que separan productos en el ticket o bordes de tablas. */
    --ui-shadow: rgba(73, 129, 175, 0.3) 0px 4px 12px;
    --ui-radius: 12px;
}