/* =========================================================
   MM SHOP · DESIGN TOKENS (tema claro premium)
   Única fuente de colores, tipografía, radios y espacios.
   Los componentes usan solo var(--…), nunca colores directos.
   Los 4 colores --brand-* se pueden cambiar desde /admin → Marca.
   Escala de espacio estricta (base 4): 4 8 12 16 24 32 48 64 96
   ========================================================= */
:root{
  color-scheme:light;

  /* Marca (sobrescritos por data.json → brand.colors) */
  --brand-accent:#2563EB;     /* azul confianza: acciones */
  --brand-accent-2:#047857;   /* esmeralda: garantías y "listo" */
  --brand-deal:#E11D48;       /* ofertas y alertas */
  --brand-whatsapp:#25D366;

  /* Tipografía */
  --font-display:"Plus Jakarta Sans","Inter","Segoe UI",system-ui,sans-serif;
  --font-sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem;
  --fs-h3:1.0625rem;
  --fs-h2:clamp(1.75rem,3vw,2.375rem);
  --fs-hero:clamp(2.25rem,4.8vw,3.75rem);

  /* Espacio */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --space-section:clamp(64px,8vw,96px);
  --container:1200px;
  --gutter:20px;
  --header-h:68px;

  /* Forma */
  --radius-sm:10px; --radius:16px; --radius-lg:20px; --radius-xl:24px; --radius-pill:999px;

  /* Superficies (neutral) */
  --bg:#F7F8FA;
  --bg-2:#F1F3F6;
  --surface:#FFFFFF;
  --surface-2:#F8FAFC;
  --surface-3:#F1F5F9;
  --border:#E6E8EC;
  --border-strong:#D5DAE1;
  --text:#0F172A;
  --text-2:#1E293B;
  --muted:#475569;
  --subtle:#5A6A7E;
  --faint:#64748B;
  --line-faint:#94A3B8;

  /* Acciones */
  --accent:var(--brand-accent);
  --accent-2:var(--brand-accent-2);
  --accent-hover:color-mix(in srgb,var(--brand-accent) 86%,#000);
  --accent-soft:color-mix(in srgb,var(--brand-accent) 8%,#fff);
  --accent-line:color-mix(in srgb,var(--brand-accent) 28%,transparent);
  --on-accent:#FFFFFF;
  --ok:var(--brand-accent-2);
  --ok-soft:color-mix(in srgb,var(--brand-accent-2) 9%,#fff);
  --deal:var(--brand-deal);
  --deal-soft:color-mix(in srgb,var(--brand-deal) 8%,#fff);
  --warn:#B45309;
  --warn-soft:#FFFBEB;
  --whatsapp:var(--brand-whatsapp);
  --on-whatsapp:#052E16;

  /* Alias usados por el panel /admin */
  --ink:#0B1220; --ink-2:#070B12; --ink-line:rgba(255,255,255,.08); --on-ink:#EEF2F7;
  --on-ink-muted:#8B98AA; --ink-accent:var(--accent); --ink-field:#0A1019;

  /* Sombras blandas */
  --shadow-xs:0 1px 2px rgba(15,23,42,.05);
  --shadow-sm:0 1px 2px rgba(15,23,42,.05),0 2px 6px -2px rgba(15,23,42,.06);
  --shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px -14px rgba(15,23,42,.18);
  --shadow-lg:0 2px 4px rgba(15,23,42,.04),0 28px 64px -28px rgba(15,23,42,.30);
  --overlay:rgba(15,23,42,.42);

  --cta-shadow:0 1px 2px rgba(15,23,42,.08),0 8px 20px -10px color-mix(in srgb,var(--brand-accent) 60%,transparent);
  --wa-shadow:0 1px 2px rgba(15,23,42,.08),0 8px 20px -10px color-mix(in srgb,var(--brand-whatsapp) 70%,transparent);
  --ease:cubic-bezier(.22,1,.36,1);
}