/* =============================================================================
   JAMM — Design tokens (portados de jammweb)
   -----------------------------------------------------------------------------
   ORIGEN: jammweb → apps/api/public/renderer/styles/tokens.css
   Autogestión vive en OTRO repo (jammnexus) y no comparte build ni assets con
   jammweb, así que los tokens se PORTAN, no se importan. Si cambian allá, hay
   que copiarlos acá a mano.

   Qué se portó: SOLO el bloque de variables (:root + tema claro). Los overrides
   de componentes del tokens.css original (.abm-form, .nuevo-pedido-modal, table,
   input, .card…) NO se copian: pisarían el CSS de autogestión, que usa los
   mismos nombres de clase para otra cosa.

   Uso: cargarlo ANTES de los <style> de la página.
   Ver docs/plan-restyle-autogestion.md.
   ============================================================================= */

:root {
    /* Tipografía global del sistema — cambiar acá cambia TODO el texto. */
    --font: 'Geist', 'Segoe UI', system-ui, sans-serif;

    /* Esquema nativo (scrollbars, controles de formulario) */
    color-scheme: dark;

    /* Acentos y superficies (stat cards, tablas, toolbars). */
    --acc-info: #38bdf8;        /* cyan — total / info */
    --acc-info-soft: rgba(56, 189, 248, 0.12);  /* tinte cyan suave — badge de ícono */
    --acc-warn: #fb923c;        /* naranja — alertas */
    --acc-ok:   #34d399;        /* verde — ok */
    --acc-alt:  #7c3aed;        /* violeta — categoría diferenciada */
    --surface-panel: #0a0b0f;   /* cards y encabezado de tabla (plano oscuro) */
    --surface-field: #0f1521;   /* buscador / filtro */
    --surface-nav:   #16181f;   /* cabecera / menú */
    --surface-chip:       rgba(255, 255, 255, 0.14);  /* chip de toolbar */
    --surface-chip-hover: rgba(255, 255, 255, 0.22);

    /* Botón "crear / confirmar" (verde) */
    --btn-success:       #059669;
    --btn-success-hover: #047857;
    /* Botón "info" (azul) */
    --btn-info:          #2563eb;
    --btn-info-hover:    #1d4ed8;

    /* Campos y switch */
    --field-bg:          #23252f;                    /* fondo de input/select (vacío) */
    --field-bg-filled:   #272c3c;                    /* fondo cuando el campo tiene dato */
    --field-border:      rgba(255, 255, 255, 0.24);  /* borde de input/select */
    --field-placeholder: rgba(255, 255, 255, 0.28);  /* texto de ejemplo */
    --switch-off:        rgba(255, 255, 255, 0.15);  /* track del switch apagado */

    /* Texto */
    --ink-900: #ffffff;                          /* Texto primario */
    --ink-700: rgba(255, 255, 255, 0.60);        /* Texto secundario */
    --ink-500: rgba(255, 255, 255, 0.38);        /* Texto dim / placeholder */

    /* Fondos */
    --paper: #000000;                            /* Fondo base */
    --panel: #08080c;                            /* Fondo de cards y paneles */
    --line:  rgba(255, 255, 255, 0.12);          /* Bordes y separadores */

    /* Acentos */
    --accent:   #00e5ff;                         /* Cyan primario */
    --accent-2: #b06bff;                         /* Violeta secundario */

    /* Estados semánticos */
    --ok:     #1f9d55;
    --warn:   #d38a1d;
    --danger: #b0392f;

    /* Superficies sutiles */
    --surface-soft:   rgba(255, 255, 255, 0.04);
    --surface-soft-2: rgba(255, 255, 255, 0.07);

    /* Elevaciones (sombras) */
    --elev-1: 0 8px 26px rgba(6, 8, 28, 0.50);
    --elev-2: 0 28px 70px rgba(5, 6, 30, 0.68);

    /* Gradientes canónicos */
    --grad-primary:   linear-gradient(135deg, #00e5ff 0%, #00b8d4 100%);
    --grad-ok:        linear-gradient(135deg, #1fff92 0%, #00c96b 100%);
    --grad-danger:    linear-gradient(135deg, #ff2d6f 0%, #c81e52 100%);
    --grad-warn:      linear-gradient(135deg, #ffb020 0%, #e08a00 100%);
    --grad-secondary: linear-gradient(135deg, #b06bff 0%, #7b3fe4 100%);
    --grad-cyan:      linear-gradient(135deg, #00e5ff 0%, #00b8d4 100%);

    /* Alturas de botones */
    --btn-h:    40px;
    --btn-h-sm: 34px;

    /* ── Extensiones de Autogestión ──
       No existen en jammweb. Se declaran acá (y no sueltas en la página) para
       que al sincronizar tokens se vea de un vistazo qué es propio de esta
       página. Si algún día jammweb define un equivalente, se reemplazan. */
    --acc-danger: #f87171;                       /* rojo legible sobre fondo oscuro
                                                    (--danger es de fondo, no de texto) */
    --acc-danger-soft: rgba(248, 113, 113, 0.12);

    /* Acción primaria. jammweb no usa relleno saturado: el patrón es tinte del
       color al ~12%, texto del color y borde al ~35% (.btn-new en components.css).
       Van en rgba y no en color-mix() porque color-mix pide Chrome 111+ y estas
       páginas las abren clientes finales; donde no se soporta la declaración es
       inválida y el botón queda sin fondo. Si cambiás --accent-2, actualizalos. */
    --ag-tint-accent:       rgba(176, 107, 255, 0.12);
    --ag-tint-accent-hover: rgba(176, 107, 255, 0.20);
    --ag-borde-accent:      rgba(176, 107, 255, 0.35);
}

/* ============================================
   Tema Claro — variables
   Autogestión todavía no tiene selector de tema; se portan igual para que el
   día que se agregue el toggle no haya que volver a traducir la paleta.
============================================ */
html[data-theme="light"] {
    color-scheme: light;
    --ink-900: #1b1e30;
    --ink-700: #3c4258;
    --ink-600: #4a5168;
    --ink-500: #6b7286;
    --paper:  #eef0f9;
    --panel:  #ffffff;
    --line:   rgba(99, 102, 241, 0.16);
    --accent:   #6366f1;
    --accent-2: #a855f7;
    --surface-soft:   rgba(99, 102, 241, 0.05);
    --surface-soft-2: rgba(99, 102, 241, 0.09);
    --grad-primary:   linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --grad-secondary: linear-gradient(135deg, #6d78d6 0%, #565bb8 100%);
    --grad-ok:        linear-gradient(135deg, #1f9d55 0%, #2eb872 100%);
    --grad-danger:    linear-gradient(135deg, #b0392f 0%, #872d26 100%);
    --grad-warn:      linear-gradient(135deg, #d38a1d 0%, #ecaa3c 100%);
    --grad-cyan:      linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);
    --elev-1: 0 6px 20px rgba(80, 70, 160, 0.10);
    --elev-2: 0 24px 56px rgba(70, 60, 150, 0.16);

    --acc-info: #0284c7;
    --acc-info-soft: rgba(2, 132, 199, 0.10);
    --acc-warn: #ea580c;
    --acc-ok:   #059669;
    --acc-alt:  #6d28d9;
    --surface-panel: #ffffff;
    --surface-field: #ffffff;
    --surface-nav:   #f4f6fc;
    --surface-chip:       rgba(15, 23, 42, 0.06);
    --surface-chip-hover: rgba(15, 23, 42, 0.11);
    --field-bg:          #ffffff;
    --field-bg-filled:   #e8effb;
    --field-border:      rgba(15, 23, 42, 0.18);
    --field-placeholder: rgba(15, 23, 42, 0.42);
    --switch-off:        rgba(15, 23, 42, 0.22);

    --acc-danger: #dc2626;
    --acc-danger-soft: rgba(220, 38, 38, 0.10);
}