/*
 * Marketplace AX — tokens de tema: Liquid Glass (estilo Apple), 2 temas (navy/light).
 *
 * Único lugar a tocar para un futuro rediseño visual del módulo. El resto de
 * los archivos CSS (marketplace.css, catalogo.css, carrito.css,
 * comprador-auth.css) y las plantillas PHP SOLO usan estas variables + las
 * variables globales de assets/css/layout.css (--text, --border-subtle, etc.)
 * — nunca colores hardcoded.
 *
 * Convención de tema del proyecto (core/views/theme_init.php,
 * core/views/topbar.php): "navy" = sin atributo data-theme (default de
 * :root); "light" = <html data-theme="light">, guardado en
 * localStorage.erp_theme. Las páginas públicas del módulo (catalogo, carrito,
 * comprador/*) no pasan por topbar.php — replican el mismo mini-switch
 * (ver mkt-theme-toggle.js más abajo en cada plantilla).
 *
 * `--mc-rgb` del tile en el dashboard general NO lee este archivo — se pinta
 * en runtime desde core_modulos.color (columna BD). Si se cambia el acento
 * aquí, actualizar también esa columna para que el tile combine (ya
 * sincronizado 2026-07-08: core_modulos.color = #1d4ed8 para clave 'marketplace').
 */
:root {
  /* ── Acento de marca: navy blue (mismo para ambos temas, 2026-07-08) ── */
  --mkt-accent:      #1d4ed8;
  --mkt-accent-rgb:  29, 78, 216;
  --mkt-accent-dark: #1e3a8a;

  /* ── Verde "dinero" — dashboard de comisionista Networking, terminal
     financiera. Mismo verde que ya se usaba suelto/hardcodeado en varias
     partes del módulo (badge "ok" del dashboard de mi-tienda, etc.) — acá
     queda como variable reusable, mismo valor en ambos temas. ── */
  --mkt-money:     #10b981;
  --mkt-money-rgb: 16, 185, 129;

  /* ── Tipografía Apple ── */
  --mkt-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
              "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mkt-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* ── Geometría "continua" (squircle-like) ── */
  --mkt-radius-sm:   14px;
  --mkt-radius:      20px;
  --mkt-radius-lg:   28px;
  --mkt-radius-pill: 999px;

  /* ── Movimiento ── */
  --mkt-ease:   cubic-bezier(.22, 1, .36, 1);   /* deceleración suave, estilo Apple */
  --mkt-spring: cubic-bezier(.34, 1.56, .64, 1); /* rebote sutil para press/hover */

  /* ── Liquid Glass — tema navy (default) ──
     Vidrio oscuro traslúcido: fondo saturado+desenfocado detrás, borde
     luminoso de 1px que simula refracción de borde, highlight superior
     (sheen especular) y sombra teñida hacia el navy del fondo. */
  --mkt-glass-blur:            22px;
  --glass-saturate:        160%;
  --glass-bg:              rgba(18, 26, 48, .52);
  --glass-bg-strong:       rgba(14, 20, 38, .74);
  --glass-border:          rgba(255, 255, 255, .14);
  --glass-border-strong:   rgba(255, 255, 255, .22);
  --mkt-glass-highlight:       rgba(255, 255, 255, .14);
  --mkt-glass-shadow:          0 20px 48px rgba(2, 8, 24, .45), 0 1px 0 rgba(255, 255, 255, .06) inset;
  --mkt-glass-shadow-sm:       0 8px 20px rgba(2, 8, 24, .35), 0 1px 0 rgba(255, 255, 255, .05) inset;
  --glass-input-bg:        rgba(255, 255, 255, .05);
  --glass-input-border:    rgba(255, 255, 255, .12);

  /* Fondo "mesh" detrás del vidrio (páginas públicas) */
  --mkt-mesh-bg: var(--navy-0);
  --mkt-mesh:
    radial-gradient(ellipse 60% 45% at 12% 8%,  rgba(var(--mkt-accent-rgb), .16) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 88% 18%, rgba(59, 130, 246, .14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 55% at 50% 100%, rgba(139, 92, 246, .12) 0%, transparent 62%);
}

/* ── Liquid Glass — tema light ──
   Vidrio claro: fondo blanco traslúcido. Sin contorno marcado (a diferencia
   del diseño original "borde blanco brillante") — sobre fondos claros/pastel
   ese borde casi opaco se veía como un anillo duro alrededor de cada card;
   la definición ahora viene solo de --mkt-glass-shadow, mismo criterio que
   ya usa el tema navy (borde ahí es apenas 14-22% opaco). */
[data-theme="light"] {
  --mkt-glass-blur:            22px;
  --glass-saturate:        180%;
  --glass-bg:              rgba(255, 255, 255, .58);
  --glass-bg-strong:       rgba(255, 255, 255, .78);
  --glass-border:          rgba(15, 23, 42, .06);
  --glass-border-strong:   rgba(15, 23, 42, .08);
  --mkt-glass-highlight:       rgba(255, 255, 255, .9);
  --mkt-glass-shadow:          0 20px 48px rgba(15, 23, 42, .10), 0 1px 0 rgba(255, 255, 255, .8) inset;
  --mkt-glass-shadow-sm:       0 8px 20px rgba(15, 23, 42, .07), 0 1px 0 rgba(255, 255, 255, .7) inset;
  --glass-input-bg:        rgba(15, 23, 42, .035);
  --glass-input-border:    rgba(15, 23, 42, .10);

  --mkt-mesh-bg: #f4f6fb;
  --mkt-mesh:
    radial-gradient(ellipse 60% 45% at 12% 8%,  rgba(var(--mkt-accent-rgb), .14) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 88% 18%, rgba(56, 189, 248, .16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 55% at 50% 100%, rgba(167, 139, 250, .14) 0%, transparent 62%);
}