/* =====================================================
   TORQUE TOKEN SYSTEM — Single source of truth
   Dark-first. Light overrides via [data-theme="light"].
   No !important. No redefinitions.
   ===================================================== */

/* Inter, servida desde /assets — nunca desde fonts.googleapis.
   Acá había un @import a Google que sobrevivió a la migración a fuentes
   self-hosteadas (b5b85f7): los archivos se bajaron y se empezaron a servir,
   pero solo stock.html y ventas.html enlazaban inter.css, así que las otras 22
   vistas seguían pagando DNS + TLS contra Google en cada carga y mandándole la
   IP de cada cliente. Poniéndolo acá lo hereda todo lo que cargue torque.css.

   Pesos disponibles: 400, 500, 600 y 700 (latin y latin-ext). El @import viejo
   pedía además 300 y 800: el 300 no lo usa ninguna regla, y el 800 —landing y
   hojas de impresión— ahora lo sintetiza el navegador desde el 700. Si esa
   diferencia molesta, la solución es agregar inter-800-*.woff2 a
   assets/vendor/inter/, no volver al CDN. */
@import url("../../vendor/inter/inter.css?v=1");

:root {
  /* --- Backgrounds --- */
  --bg-base:    #141414;
  --bg-raised:  #111111;
  --bg-overlay: #161616;
  --bg-hover:   #1f1f1f;

  /* --- Surfaces (cards, panels) --- */
  --surface:       #111111;
  --surface-hover: #161616;

  /* --- Borders --- */
  --border:        rgba(255, 255, 255, 0.06);
  --border-mid:    rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* --- Text (rgba para composición correcta sobre cualquier fondo) --- */
  --text:       rgba(255, 255, 255, 0.92);
  --text-2:     rgba(255, 255, 255, 0.50);
  --text-muted: rgba(255, 255, 255, 0.28);
  --text-faint: rgba(255, 255, 255, 0.14);
  --hero-title-color: var(--text);
  --hero-subtitle-color: var(--text-muted);

  /* --- Accent (purple) --- */
  --accent:      #8b2fc9;
  --accent-hi:   #a855f7;
  --accent-dim:  #7c22b5;
  --accent-soft: rgba(139, 47, 201, 0.12);
  --accent-glow: rgba(168, 85, 247, 0.20);
  --focus-ring:  rgba(168, 85, 247, 0.10);

  /* --- Semantic colors --- */
  --danger:       #f87171;
  --danger-soft:  rgba(248, 113, 113, 0.10);
  /* Para SUPERFICIES rellenas con texto blanco encima (botones), no para texto.
     --danger es un rojo claro afinado para leerse SOBRE fondo oscuro; usado como
     fondo con letra blanca da 2,77:1 y no llega al mínimo de 4,5:1 de WCAG AA.
     Este llega a 4,83:1. Es el mismo #dc2626 que .v-btn-danger tenía escrito a
     mano antes de tokenizarse: la tokenización tomó el token equivocado y el
     contraste se perdió sin que nadie lo midiera. */
  --danger-solid: #dc2626;
  --success:      #4ade80;
  --success-soft: rgba(74, 222, 128, 0.08);
  --warning:      #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.10);
  --blue:         #60a5fa;
  --blue-soft:    rgba(96, 165, 250, 0.08);

  /* --- Border radius --- */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);

  /* --- Typography --- */
  --font: "Inter", system-ui, sans-serif;

  /* --- Sidebar --- */
  --sidebar-width:  224px;
  --sidebar-bg:     #111111;
  --sidebar-border: rgba(255, 255, 255, 0.06);

  /* --- Top Navbar --- */
  --navbar-height: 52px;

  /* --- Form fields ---
     Un escalón por encima de --surface (#111): en oscuro el campo se aclara
     en vez de oscurecerse, que es lo que se lee como "hundido" en un panel. */
  --field-bg:     #1c1c1c;
  --field-border: rgba(255, 255, 255, 0.14);
  --field-focus:  rgba(168, 85, 247, 0.50);

  /* --- Spacing scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* --- Table shell inner gutter --- */
  --table-side-gutter: 0px;

  /* --- Alto de los controles ---------------------------------------------
     Un solo lugar define cuán alto es un control en toda la app. Los botones
     (.v-btn y variantes, .btn-search) y los botones de ícono de las tablas
     (.btn-action) leen de acá en vez de traer su propio número.

     En el celular suben a 44px, que es el área táctil mínima razonable: con 38
     el dedo erra, y en las filas de stock hay cuatro botones pegados donde
     "eliminar" queda al lado de "editar". Se cambia acá y no módulo por módulo
     justamente para que no vuelva a haber cinco alturas distintas conviviendo. */
  --control-h: 38px;
  --control-action: 30px;
}

@media (max-width: 768px) {
  :root {
    --control-h: 44px;
    --control-action: 44px;
  }
}

/* =====================================================
   LIGHT THEME OVERRIDES
   ===================================================== */

[data-theme="light"] {
  --bg-base:    #f4f4f5;
  --bg-raised:  #ffffff;
  --bg-overlay: #f0f0f2;
  --bg-hover:   #e8e8ea;

  --surface:       #ffffff;
  --surface-hover: #f8f8fa;

  --border:        rgba(0, 0, 0, 0.07);
  --border-mid:    rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.16);

  --text:       rgba(0, 0, 0, 0.88);
  --text-2:     rgba(0, 0, 0, 0.55);
  --text-muted: rgba(0, 0, 0, 0.38);
  --text-faint: rgba(0, 0, 0, 0.18);
  --hero-title-color: var(--text);
  --hero-subtitle-color: var(--text-muted);

  --accent:      #7c3aed;
  --accent-hi:   #9333ea;
  --accent-dim:  #6d28d9;
  --accent-soft: rgba(124, 58, 237, 0.08);
  --accent-glow: rgba(124, 58, 237, 0.14);
  --focus-ring:  rgba(124, 58, 237, 0.10);

  --danger:       #dc2626;
  --danger-solid: #dc2626;  /* en claro coinciden: ya pasa AA con texto blanco */
  --success:     #16a34a;
  --warning:     #d97706;
  --blue:        #2563eb;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

  --sidebar-bg:     #ffffff;
  --sidebar-border: rgba(0, 0, 0, 0.07);

  /* Gris apenas por debajo de --surface (#fff): los campos van casi siempre
     sobre una card blanca, y con el mismo blanco solo los delataba el borde.
     Un relleno propio los hace leer como campo antes de mirar el borde. */
  --field-bg:     #eceef2;
  --field-border: rgba(0, 0, 0, 0.18);
  --field-focus:  rgba(124, 58, 237, 0.45);
}