/* ============================================================
   Ocosingo.mx — Design tokens (Fase 3)
   Los colores y fuentes de marca aqui son SOLO fallback.
   En runtime los sobrescribe <style id="dm-brand-tokens"> impreso
   en wp_head a partir de la Options Page "Directorio Municipal".
   ============================================================ */
:root{
  /* --- Marca (fallback; override desde Options Page) --- */
  --dm-primary:#0E7C66;
  --dm-secondary:#16243F;
  --dm-accent:#E8902A;
  --dm-bg:#F7F3EA;
  --dm-surface:#FFFFFF;
  --dm-text:#16243F;
  --dm-text-muted:#5D6470;
  --dm-font-display:"Montserrat",system-ui,-apple-system,sans-serif;
  --dm-font-body:"Inter",system-ui,-apple-system,sans-serif;

  /* --- Derivados de marca (rebrand automatico via color-mix) --- */
  --dm-primary-hover:color-mix(in srgb,var(--dm-primary) 85%,#000);
  --dm-primary-soft:color-mix(in srgb,var(--dm-primary) 12%,#fff);
  --dm-secondary-soft:color-mix(in srgb,var(--dm-secondary) 10%,#fff);
  --dm-accent-soft:color-mix(in srgb,var(--dm-accent) 16%,#fff);
  --dm-bg-alt:color-mix(in srgb,var(--dm-bg) 65%,#fff);
  --dm-surface-2:color-mix(in srgb,var(--dm-bg) 45%,#fff);
  --dm-border:color-mix(in srgb,var(--dm-secondary) 14%,#fff);
  --dm-border-strong:color-mix(in srgb,var(--dm-secondary) 26%,#fff);
  --dm-text-faint:color-mix(in srgb,var(--dm-text) 55%,#fff);
  --dm-text-on-primary:#FFFFFF;
  --dm-text-on-dark:#EAF0EE;

  /* --- Funcionales (no de marca, fijos) --- */
  --dm-whatsapp:#1FA855;
  --dm-whatsapp-hover:#178545;
  --dm-success:#16A34A;
  --dm-danger:#DC2626;
  --dm-star:#F5A623;
  --dm-sponsor:#8B5CF6;

  /* --- Tipografia --- */
  --dm-text-xs:.75rem;
  --dm-text-sm:.8125rem;
  --dm-text-base:.9375rem;
  --dm-text-md:1.0625rem;
  --dm-text-lg:clamp(1.15rem,1rem + .6vw,1.35rem);
  --dm-text-xl:clamp(1.4rem,1.1rem + 1.1vw,1.85rem);
  --dm-text-2xl:clamp(1.9rem,1.3rem + 2.4vw,2.9rem);
  --dm-text-3xl:clamp(2.4rem,1.4rem + 3.6vw,3.9rem);
  --dm-weight-regular:400;
  --dm-weight-medium:500;
  --dm-weight-semibold:600;
  --dm-weight-bold:700;

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

  /* --- Radios --- */
  --dm-radius-sm:8px; --dm-radius:14px; --dm-radius-lg:20px;
  --dm-radius-xl:28px; --dm-radius-pill:999px;

  /* --- Sombras --- */
  --dm-shadow-sm:0 1px 2px rgba(22,36,63,.06),0 1px 3px rgba(22,36,63,.08);
  --dm-shadow:0 4px 12px rgba(22,36,63,.08),0 2px 4px rgba(22,36,63,.06);
  --dm-shadow-lg:0 12px 32px rgba(22,36,63,.12),0 4px 8px rgba(22,36,63,.06);
  --dm-ring:0 0 0 3px color-mix(in srgb,var(--dm-primary) 35%,transparent);

  /* --- Breakpoints (referencia; CSS var no usable dentro de @media) --- */
  --dm-bp-tablet:1024px;
  --dm-bp-mobile:767px;
}

/* Identidad base sin pelear con Elementor: tipografia de marca.
   Color/fondo se aplican suave; los widgets pueden sobrescribir por elemento. */
body{ font-family:var(--dm-font-body); color:var(--dm-text); background-color:var(--dm-bg); }
h1,h2,h3,h4,h5,h6{ font-family:var(--dm-font-display); }