/* ==========================================================================
   Design Tokens — ERP Distribuidora Cárdenas
   Paleta: tonalidades de Verde + Blanco. El negro/gris muy oscuro se usa
   únicamente para texto, nunca como color de fondo o superficie.
   Tema por defecto: oscuro (fondo verde muy oscuro). Alternativa: claro
   (data-theme="light", fondo blanco).

   Dirección visual: "libro mayor digital" — precisión de inventario y
   contabilidad. Cifras en monoespaciada tabular, encabezados en Sora
   (geométrica, técnica), textura de grid punteado como firma visual en
   vez de los blobs/gradientes genéricos.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@600;700;800&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root {
  /* Escala Verde Bosque (superficies en dark) */
  --green-950: #051912;
  --green-900: #0a231a;
  --green-800: #0f2f22;
  --green-700: #163f2d;
  --green-600: #1f5139;
  --green-500: #2c6b4a;

  /* Escala Verde Esmeralda (acento primario) */
  --emerald-700: #0a7a4a;
  --emerald-600: #0f9d58;
  --emerald-500: #16b869;
  --emerald-400: #4ade80;
  --emerald-300: #86efac;

  /* Escala neutra (blancos y grises muy claros, con ligero sesgo verde) */
  --gray-50:  #f7faf8;
  --gray-100: #edf3ef;
  --gray-200: #dfe8e2;
  --gray-300: #c6d4cb;
  --gray-400: #99ac9f;
  --gray-500: #6c7d71;
  --gray-600: #4c5c50;
  --gray-700: #334036;
  --gray-800: #1f2923;
  --gray-900: #121a15;

  /* Semántico (estable en ambos temas). Success/Info se mantienen en la
     familia verde; warning/danger conservan ámbar y rojo por legibilidad
     de alertas (stock crítico, vencimientos), el resto de la interfaz es
     100% verde + blanco + negro (solo texto). */
  --success: #17b26a;
  --success-bg: rgba(23, 178, 106, .12);
  --warning: #f79009;
  --warning-bg: rgba(247, 144, 9, .12);
  --danger: #f04438;
  --danger-bg: rgba(240, 68, 56, .12);
  --info: #2f9e44;
  --info-bg: rgba(47, 158, 68, .12);

  /* Tipografía — jerarquía con 3 roles: display (marca/títulos), sans (UI
     general) y mono tabular (cifras: precios, stock, cantidades). */
  --font-display: 'Sora', 'Inter', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-base: .9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-xxl: 2.25rem;
  --fs-xxxl: 2.75rem;

  /* Espaciado (base 4px) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Radios */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* Transiciones */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  --sidebar-w: 272px;
  --sidebar-w-collapsed: 80px;
  --navbar-h: 68px;

  /* Grid punteado — firma visual: "papel de inventario / libro mayor" */
  --grid-dot-size: 22px;
  --ring-focus: 0 0 0 4px rgba(22, 184, 105, .18);
}

/* ---------- Tema oscuro (por defecto): fondo verde muy oscuro, texto blanco ---------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-app: var(--green-950);
  --bg-surface: var(--green-900);
  --bg-surface-2: var(--green-800);
  --bg-elevated: var(--green-700);
  --bg-hover: rgba(255, 255, 255, .045);

  --border-color: rgba(255, 255, 255, .08);
  --border-color-strong: rgba(255, 255, 255, .16);

  /* En dark, el texto es blanco (nunca negro sobre fondo oscuro) */
  --text-primary: #f5faf7;
  --text-secondary: #b9ccbf;
  --text-muted: #7c9384;

  --accent: var(--emerald-500);
  --accent-strong: var(--emerald-400);
  --accent-contrast: #ffffff;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.25);
  --shadow-2: 0 10px 28px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --shadow-3: 0 30px 80px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.4);
  --shadow-glow: 0 0 0 1px rgba(22,184,105,.25), 0 12px 32px rgba(15,157,88,.28);

  --gradient-brand: linear-gradient(135deg, #0a7a4a 0%, #0f9d58 42%, #16b869 72%, #4ade80 100%);
  --gradient-surface: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
  --gradient-mesh: radial-gradient(circle at 15% 0%, rgba(22,184,105,.16), transparent 55%),
                   radial-gradient(circle at 85% 100%, rgba(74,222,128,.10), transparent 50%);

  --dot-grid: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  --scrim: rgba(3, 10, 7, .68);
}

/* ---------- Tema claro: fondo blanco, texto negro ---------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-app: var(--gray-50);
  --bg-surface: #ffffff;
  --bg-surface-2: var(--gray-100);
  --bg-elevated: #ffffff;
  --bg-hover: rgba(10, 26, 18, .04);

  --border-color: rgba(10, 26, 18, .09);
  --border-color-strong: rgba(10, 26, 18, .16);

  /* En light, el texto es negro/gris muy oscuro (unica funcion del negro) */
  --text-primary: #0c1510;
  --text-secondary: #45564b;
  --text-muted: #7c8f81;

  --accent: var(--emerald-600);
  --accent-strong: var(--emerald-700);
  --accent-contrast: #ffffff;

  --shadow-1: 0 1px 2px rgba(10,26,18,.06), 0 1px 1px rgba(10,26,18,.04);
  --shadow-2: 0 10px 28px rgba(10,26,18,.09), 0 2px 8px rgba(10,26,18,.05);
  --shadow-3: 0 30px 80px rgba(10,26,18,.16), 0 8px 24px rgba(10,26,18,.08);
  --shadow-glow: 0 0 0 1px rgba(15,157,88,.18), 0 12px 32px rgba(15,157,88,.18);

  --gradient-brand: linear-gradient(135deg, #0a7a4a 0%, #0f9d58 42%, #16b869 72%, #4ade80 100%);
  --gradient-surface: linear-gradient(180deg, rgba(10,26,18,.02), rgba(10,26,18,0));
  --gradient-mesh: radial-gradient(circle at 15% 0%, rgba(15,157,88,.10), transparent 55%),
                   radial-gradient(circle at 85% 100%, rgba(74,222,128,.08), transparent 50%);

  --dot-grid: radial-gradient(rgba(10,26,18,.08) 1px, transparent 1px);
  --scrim: rgba(6, 14, 10, .5);
}

/* Respeta preferencia del sistema si el usuario aun no eligio (sin atributo) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg-app: var(--gray-50);
    --bg-surface: #ffffff;
    --bg-surface-2: var(--gray-100);
    --bg-elevated: #ffffff;
    --bg-hover: rgba(10, 26, 18, .04);
    --border-color: rgba(10, 26, 18, .09);
    --border-color-strong: rgba(10, 26, 18, .16);
    --text-primary: #0c1510;
    --text-secondary: #45564b;
    --text-muted: #7c8f81;
    --accent: var(--emerald-600);
    --accent-strong: var(--emerald-700);
    --shadow-1: 0 1px 2px rgba(10,26,18,.06), 0 1px 1px rgba(10,26,18,.04);
    --shadow-2: 0 10px 28px rgba(10,26,18,.09), 0 2px 8px rgba(10,26,18,.05);
    --shadow-3: 0 30px 80px rgba(10,26,18,.16), 0 8px 24px rgba(10,26,18,.08);
    --shadow-glow: 0 0 0 1px rgba(15,157,88,.18), 0 12px 32px rgba(15,157,88,.18);
    --dot-grid: radial-gradient(rgba(10,26,18,.08) 1px, transparent 1px);
    --scrim: rgba(6, 14, 10, .5);
  }
}