/* Tokens de diseño. Paleta "slate" y acentos tomados del dashboard de referencia
   (ver docs/REFERENCIA_DISENO.md), oscurecidos un poco para contraste AA al sol. */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Superficies */
  --bg: #f8fafc;
  --superficie: #ffffff;
  --superficie-2: #f1f5f9;
  --superficie-3: #e2e8f0;
  --borde: #e2e8f0;
  --borde-fuerte: #cbd5e1;
  /* Texto */
  --texto: #0f172a;
  --texto-2: #475569;
  --texto-3: #64748b;
  /* Semánticos: utilidad = verde, costos al alza = rojo, alertas = ámbar */
  --c-azul: #0369a1;
  --c-verde: #047857;
  --c-rojo: #b91c1c;
  --c-ambar: #b45309;
  --c-morado: #6d28d9;
  --c-azul-suave: #e0f2fe;
  --c-verde-suave: #d1fae5;
  --c-rojo-suave: #fee2e2;
  --c-ambar-suave: #fef3c7;
  --c-morado-suave: #ede9fe;
  /* Colores de gráficos (más vivos, como en la referencia) */
  --g-ventas: #0284c7;
  --g-costos: #e11d48;
  --g-utilidad: #059669;
  --g-rejilla: rgba(15, 23, 42, 0.07);
  /* Categorías de productos */
  --cat-1: #d97706;
  --cat-2: #e11d48;
  --cat-3: #059669;
  --cat-4: #7c3aed;
  --cat-5: #0284c7;
  --cat-6: #0d9488;
  /* Marca del negocio: la app la sobrescribe con la configuración */
  --marca: #0284c7;
  --marca-fuerte: #0369a1;
  --marca-suave: #e0f2fe;
  --marca-texto: #ffffff;
  --acento: #d97706;
  /* Forma */
  --radio: 12px;
  --radio-s: 8px;
  --radio-xs: 6px;
  --sombra: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --sombra-alta: 0 12px 32px rgba(15, 23, 42, 0.18);
  --foco: 0 0 0 3px rgba(2, 132, 199, 0.45);
  --overlay: rgba(15, 23, 42, 0.55);
  /* Tipografía */
  --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuente-titulo: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  /* Medidas */
  --alto-nav: 64px;
  --ancho-lateral: 232px;
  --toque: 48px;
  --toque-vender: 72px;
}

[data-tema="oscuro"] {
  color-scheme: dark;
  --bg: #0b0f19;
  --superficie: #111827;
  --superficie-2: #172033;
  --superficie-3: #1f2a40;
  --borde: #1f293d;
  --borde-fuerte: #334155;
  --texto: #f8fafc;
  --texto-2: #cbd5e1;
  --texto-3: #94a3b8;
  --c-azul: #38bdf8;
  --c-verde: #34d399;
  --c-rojo: #fb7185;
  --c-ambar: #fbbf24;
  --c-morado: #c4b5fd;
  --c-azul-suave: rgba(56, 189, 248, 0.14);
  --c-verde-suave: rgba(16, 185, 129, 0.16);
  --c-rojo-suave: rgba(244, 63, 94, 0.16);
  --c-ambar-suave: rgba(245, 158, 11, 0.16);
  --c-morado-suave: rgba(168, 85, 247, 0.16);
  --g-ventas: #38bdf8;
  --g-costos: #f43f5e;
  --g-utilidad: #10b981;
  --g-rejilla: rgba(248, 250, 252, 0.08);
  --marca-suave: rgba(56, 189, 248, 0.14);
  --sombra: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --foco: 0 0 0 3px rgba(56, 189, 248, 0.5);
  --overlay: rgba(0, 0, 0, 0.7);
}