/* ============================================================
   STOCKLATAM — Design tokens
   Capas: primitivo -> semantico -> componente (ver skill design-system)

   Dos temas completos (claro / oscuro), ambos con paleta neutra suave:
   ni blanco puro ni casi-negro, para jornadas largas en bodega.
   Todos los pares texto/fondo verificados a >= 4.5:1 (WCAG AA).
   ============================================================ */
:root {
  /* --- Primitivo: neutros (slate) --- */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* --- Primitivo: acento de marca (ambar industrial — accion/CTA) --- */
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-800: #92400e;

  /* --- Primitivo: colores de estado --- */
  /* Tono 700: para texto sobre superficies CLARAS */
  --blue-700:   #0369a1; /* EN_BODEGA */
  --violet-700: #6d28d9; /* EN_PRODUCCION */
  --teal-700:   #047857; /* TRANSFORMADO */
  --green-700:  #15803d; /* ENTREGADO */
  --orange-700: #c2410c; /* DEVUELTO */
  --red-700:    #b91c1c; /* CANCELADO */
  --indigo-700: #4338ca; /* INTERIOR */
  --cyan-700:   #0e7490; /* EXTERIOR */

  /* Tono 300: para texto sobre superficies OSCURAS */
  --blue-300:   #7dd3fc;
  --violet-300: #c4b5fd;
  --teal-300:   #6ee7b7;
  --green-300:  #86efac;
  --orange-300: #fdba74;
  --red-300:    #fca5a5;
  --indigo-300: #a5b4fc;
  --cyan-300:   #67e8f9;

  /* --- Semantico: TEMA CLARO (por defecto) --- */
  color-scheme: light;

  --color-bg:            #eceff4;  /* neutro suave, no blanco puro */
  --color-surface:       #ffffff;
  --color-surface-alt:   #f4f6f9;  /* cabeceras de tabla, filas hover */
  --color-border:        #d8dee7;
  --color-text:          #24303f;  /* casi-negro suave, no #000 */
  --color-text-muted:    #5a6a7d;  /* 5.4:1 sobre superficie */
  --color-nav-bg:        #1f2937;
  --color-nav-text:      #cbd5e1;

  --color-primary:       var(--amber-700); /* blanco encima = 4.8:1 (amber-600 solo daba 3.2) */
  --color-primary-hover: var(--amber-800);
  --color-primary-fg:    #ffffff;
  --color-primary-fg-soft: rgba(255, 255, 255, .85);
  --color-danger-fg:     #ffffff;

  --color-status-en-bodega:     var(--blue-700);
  --color-status-en-produccion: var(--violet-700);
  --color-status-transformado:  var(--teal-700);
  --color-status-entregado:     var(--green-700);
  --color-status-devuelto:      var(--orange-700);
  --color-status-cancelado:     var(--red-700);
  --color-usage-interior:       var(--indigo-700);
  --color-usage-exterior:       var(--cyan-700);

  /* Series de graficos (Chart.js no lee variables en tiempo real: se leen en JS) */
  --color-chart-entradas: var(--amber-700);
  --color-chart-salidas:  var(--blue-700);

  /* --- Componente --- */
  --radius-card:   0.75rem;  /* rounded-xl */
  --radius-badge:  9999px;   /* pill */
  --radius-btn:    0.5rem;   /* rounded-lg */
  --shadow-card:   0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px -12px rgba(15, 23, 42, .18);
  --shadow-float:  0 20px 45px -15px rgba(15, 23, 42, .35);
  --btn-touch-min: 3rem;     /* 48px — objetivo tactil para OPERADOR en bodega */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* --- Sidebar (riel de iconos) --- */
  --sidebar-width:           16rem;  /* 256px, expandido */
  --sidebar-width-collapsed: 4.5rem; /* 72px, solo iconos */
}

/* --- Semantico: TEMA OSCURO ---
   Se aplica con [data-theme="dark"] (toggle explicito) o, si el usuario nunca
   eligio, con la preferencia del sistema. El toggle siempre puede ganar. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg:            #1a2130;  /* gris azulado, no casi-negro */
    --color-surface:       #232c3d;
    --color-surface-alt:   #2b3547;
    --color-border:        #3a4559;
    --color-text:          #e6ecf4;
    --color-text-muted:    #a7b4c6;  /* 6.4:1 sobre superficie */
    --color-nav-bg:        #141a26;
    --color-nav-text:      #b6c2d4;

    --color-primary:       var(--amber-500); /* mas luminoso para destacar en oscuro */
    --color-primary-hover: var(--amber-600);
    --color-primary-fg:    #1f1400;          /* texto oscuro sobre ambar = 9:1 */
    --color-primary-fg-soft: rgba(31, 20, 0, .8);
    --color-danger-fg:     #2a0a0a;          /* texto oscuro sobre rojo-300 = 7:1 */

    --color-status-en-bodega:     var(--blue-300);
    --color-status-en-produccion: var(--violet-300);
    --color-status-transformado:  var(--teal-300);
    --color-status-entregado:     var(--green-300);
    --color-status-devuelto:      var(--orange-300);
    --color-status-cancelado:     var(--red-300);
    --color-usage-interior:       var(--indigo-300);
    --color-usage-exterior:       var(--cyan-300);

    --color-chart-entradas: var(--amber-500);
    --color-chart-salidas:  var(--blue-300);

    --shadow-card:   0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .55);
    --shadow-float:  0 20px 45px -15px rgba(0, 0, 0, .7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg:            #1a2130;
  --color-surface:       #232c3d;
  --color-surface-alt:   #2b3547;
  --color-border:        #3a4559;
  --color-text:          #e6ecf4;
  --color-text-muted:    #a7b4c6;
  --color-nav-bg:        #141a26;
  --color-nav-text:      #b6c2d4;

  --color-primary:       var(--amber-500);
  --color-primary-hover: var(--amber-600);
  --color-primary-fg:    #1f1400;
  --color-primary-fg-soft: rgba(31, 20, 0, .8);
  --color-danger-fg:     #2a0a0a;

  --color-status-en-bodega:     var(--blue-300);
  --color-status-en-produccion: var(--violet-300);
  --color-status-transformado:  var(--teal-300);
  --color-status-entregado:     var(--green-300);
  --color-status-devuelto:      var(--orange-300);
  --color-status-cancelado:     var(--red-300);
  --color-usage-interior:       var(--indigo-300);
  --color-usage-exterior:       var(--cyan-300);

  --color-chart-entradas: var(--amber-500);
  --color-chart-salidas:  var(--blue-300);

  --shadow-card:   0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .55);
  --shadow-float:  0 20px 45px -15px rgba(0, 0, 0, .7);
}