/*
    theme-tokens.css
    Fuente unica de verdad para el rediseno visual del ERP: paleta de color,
    tipografia, radios, sombras y espaciado. Se carga antes que modern-ui.css,
    modern-shell.css, modern-components.css y dashboard-modern.css, que
    mapean sus propias variables (--mu-*, --dm-*) a estos tokens (--t-*) en
    vez de reescribir sus reglas existentes. No define selectores de
    componentes, solo variables.
*/

:root {
    /* ---------- Color ---------- */
    --t-primary: #0B5ED7;
    --t-primary-dark: #094CB0;
    --t-primary-soft: rgba(11, 94, 215, 0.10);
    --t-secondary: #1E293B;

    --t-success: #10B981;
    --t-success-bg: #ECFDF5;
    --t-warning: #F59E0B;
    --t-warning-bg: #FFFBEB;
    --t-danger: #EF4444;
    --t-danger-bg: #FEF2F2;
    --t-info: #06B6D4;
    --t-info-bg: #ECFEFF;

    --t-bg: #F8FAFC;
    --t-card: #FFFFFF;
    --t-text: #1F2937;
    --t-text-muted: #64748B;
    --t-border: #E5E9F1;

    /* Sidebar: navy de marca en claro, navy mas oscuro en oscuro (ver
       html.dark-mode mas abajo) -- sigue el tema igual que el header, en
       vez de quedar fijo en un solo tono. */
    --t-sidebar-bg: #004175;
    --t-sidebar-active: #3D5FD3;
    --t-sidebar-icon: #A9C2E8;

    /* Header: SI sigue el tema claro/oscuro del contenido (a diferencia
       del sidebar, que es siempre navy) -- fondo blanco + iconos/texto
       navy en claro, fondo oscuro (--t-card) + iconos/texto blancos en
       oscuro. Ver bloque html.dark-mode mas abajo. */
    --t-header-fg: #004175;

    /* Pestañas (.nav-tabs): texto plano + subrayado dorado en la activa,
       mismo criterio que INTRANET SDJ. Ver el componente en
       modern-components.css -- al ser tokens, el modo oscuro sale solo. */
    --t-tab-text: #5B6B78;
    --t-tab-text-active: #1E3A6E;
    --t-tab-underline: #B98A2E;
    --t-tab-hover-bg: #EEF2F5;
    --t-tab-border: #DCE4EA;

    /* ---------- Tipografia ---------- */
    --t-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --t-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
    --t-fs-xs: 11px;
    --t-fs-sm: 12.5px;
    --t-fs-base: 13.5px;
    --t-fs-md: 15px;
    --t-fs-lg: 18px;
    --t-fs-xl: 24px;
    --t-fs-2xl: 32px;

    /* ---------- Radio / sombra / espaciado ---------- */
    --t-radius-sm: 8px;
    --t-radius: 12px;
    --t-radius-lg: 16px;
    --t-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --t-shadow: 0 2px 10px rgba(15, 23, 42, 0.07);
    --t-shadow-lg: 0 8px 28px rgba(15, 23, 42, 0.12);
    --t-shadow-hover: 0 10px 24px rgba(15, 23, 42, 0.12);
    --t-space-1: 4px;
    --t-space-2: 8px;
    --t-space-3: 12px;
    --t-space-4: 16px;
    --t-space-5: 24px;
    --t-space-6: 32px;
    --t-transition: 160ms cubic-bezier(.4,0,.2,1);
}

/* ---------- Modo oscuro: mismos nombres de token, valores oscuros ---------- */
html.dark-mode {
    --t-primary: #3B82F6;
    --t-primary-dark: #60A5FA;
    --t-primary-soft: rgba(59, 130, 246, 0.16);
    --t-secondary: #CBD5E1;

    --t-success: #34D399;
    --t-success-bg: rgba(16, 185, 129, 0.12);
    --t-warning: #FBBF24;
    --t-warning-bg: rgba(245, 158, 11, 0.12);
    --t-danger: #F87171;
    --t-danger-bg: rgba(239, 68, 68, 0.12);
    --t-info: #22D3EE;
    --t-info-bg: rgba(6, 182, 212, 0.12);

    --t-bg: #0F172A;
    --t-card: #1E293B;
    --t-text: #F1F5F9;
    --t-text-muted: #94A3B8;
    --t-border: rgba(148, 163, 184, 0.18);

    --t-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --t-shadow: 0 2px 10px rgba(0, 0, 0, 0.30);
    --t-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.40);
    --t-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.42);

    --t-header-fg: #ffffff;

    /* Navy mas profundo (no el gris neutro de --t-card) para que el
       sidebar conserve su identidad de marca incluso en modo oscuro, en
       vez de fundirse con el resto de paneles oscuros. */
    --t-sidebar-bg: #0A2540;

    --t-tab-text: #94A3B8;
    --t-tab-text-active: #7FA7E0;
    --t-tab-underline: #E0B65C;
    --t-tab-hover-bg: #243247;
    --t-tab-border: rgba(148, 163, 184, .18);
}

body, .smart-form, .modal-content {
    font-family: var(--t-font);
}