/* ==========================================================================
   DESIGN TOKENS — Sistema ERP/POS Lavandería de Calzado
   Modo claro y oscuro mediante [data-theme] en <html>.
   Colores de módulo fijos (no cambian entre temas) para que cada
   sección del sistema sea reconocible al instante, como pidió el brief.
   ========================================================================== */

:root {
    /* Tipografía: stack de sistema (carga instantánea, funciona offline / PWA) */
    --font-sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

    /* Escala tipográfica */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;

    /* Espaciado (base 4px) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;

    /* Radios y elevación */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06), 0 1px 3px rgb(15 23 42 / 0.08);
    --shadow-md: 0 4px 6px rgb(15 23 42 / 0.05), 0 10px 15px rgb(15 23 42 / 0.08);
    --shadow-lg: 0 10px 20px rgb(15 23 42 / 0.10), 0 4px 8px rgb(15 23 42 / 0.06);

    /* Tamaño mínimo táctil obligatorio */
    --touch-target: 48px;

    /* Transición del cambio de tema (suave, sin parpadeo) */
    --theme-transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;

    /* -------- Colores fijos por módulo (iguales en claro y oscuro) -------- */
    --module-dashboard: #2563EB;      /* Azul        */
    --module-dashboard-bg: #EFF6FF;
    --module-clientes: #16A34A;       /* Verde       */
    --module-clientes-bg: #F0FDF4;
    --module-recepcion: #EA580C;      /* Naranja     */
    --module-recepcion-bg: #FFF7ED;
    --module-caja: #B45309;           /* Amarillo/oro (oscurecido para contraste AA) */
    --module-caja-bg: #FFFBEB;
    --module-inventario: #7C3AED;     /* Morado      */
    --module-inventario-bg: #F5F3FF;
    --module-compras: #0891B2;        /* Celeste     */
    --module-compras-bg: #ECFEFF;
    --module-proveedores: #475569;    /* Gris        */
    --module-proveedores-bg: #F1F5F9;
    --module-contabilidad: #1E3A8A;   /* Azul oscuro */
    --module-contabilidad-bg: #EFF6FF;
    --module-reportes: #DC2626;       /* Rojo        */
    --module-reportes-bg: #FEF2F2;
    --module-configuracion: #18181B;  /* Negro       */
    --module-configuracion-bg: #F4F4F5;
}

/* ---------------------------- Tema claro (default) ---------------------------- */
:root,
[data-theme="light"] {
    --color-bg: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-surface-alt: #F1F5F9;
    --color-border: #E2E8F0;
    --color-text: #0F172A;
    --color-text-muted: #64748B;
    --color-text-inverse: #F8FAFC;
    --color-primary: #2563EB;
    --color-primary-hover: #1D4ED8;
    --color-success: #16A34A;
    --color-warning: #B45309;
    --color-danger: #DC2626;
    --color-focus-ring: #2563EB;
}

/* ---------------------------- Tema oscuro ---------------------------- */
[data-theme="dark"] {
    --color-bg: #0B1220;
    --color-surface: #111827;
    --color-surface-alt: #1A2332;
    --color-border: #1F2937;
    --color-text: #F1F5F9;
    --color-text-muted: #94A3B8;
    --color-text-inverse: #0F172A;
    --color-primary: #3B82F6;
    --color-primary-hover: #60A5FA;
    --color-success: #22C55E;
    --color-warning: #D97706;
    --color-danger: #EF4444;
    --color-focus-ring: #60A5FA;

    /* Los colores de módulo se aclaran levemente para mantener contraste sobre fondo oscuro */
    --module-dashboard: #60A5FA;
    --module-dashboard-bg: #15233D;
    --module-clientes: #4ADE80;
    --module-clientes-bg: #0F2A1B;
    --module-recepcion: #FB923C;
    --module-recepcion-bg: #2E1A0C;
    --module-caja: #FBBF24;
    --module-caja-bg: #2E2107;
    --module-inventario: #A78BFA;
    --module-inventario-bg: #221A3D;
    --module-compras: #22D3EE;
    --module-compras-bg: #0B2A30;
    --module-proveedores: #94A3B8;
    --module-proveedores-bg: #1E2532;
    --module-contabilidad: #818CF8;
    --module-contabilidad-bg: #1B1F3D;
    --module-reportes: #F87171;
    --module-reportes-bg: #2E1414;
    --module-configuracion: #E5E7EB;
    --module-configuracion-bg: #1C1C1F;
}