:root{
  --wm-bg: #ffffff;
  --wm-fg: #0b0f19;
  --wm-muted: rgba(11,15,25,.62);
  --wm-card: rgba(255,255,255,.78);
  --wm-border: rgba(15,23,42,.10);
  --wm-shadow: 0 10px 30px rgba(2,6,23,.08);

  /* ✅ Acentos base WikiMeteo (azules suaves, Apple-ish) */
  --wm-accent:  #8be6ff;
  --wm-accent2: #7aa7ff;

  --wm-radius: 20px;
  --wm-radius2: 28px;
  --wm-pad: 18px;
  --wm-wrap: 1100px;
  --wm-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}

/* Auto: si el SO es oscuro, variables oscuras */
@media (prefers-color-scheme: dark){
  :root{
    --wm-bg: #070a12;
    --wm-fg: #e8edf7;
    --wm-muted: rgba(232,237,247,.62);
    --wm-card: rgba(255,255,255,.06);
    --wm-border: rgba(148,163,184,.18);
    --wm-shadow: 0 16px 40px rgba(0,0,0,.35);

    /* ✅ Acentos en oscuro (más profundos pero siguen azules) */
    --wm-accent:  #38bdf8;
    --wm-accent2: #3b82f6;
  }
}

/* overrides manuales */
html[data-theme="light"]{
  --wm-bg: #ffffff;
  --wm-fg: #0b0f19;
  --wm-muted: rgba(11,15,25,.62);
  --wm-card: rgba(255,255,255,.78);
  --wm-border: rgba(15,23,42,.10);
  --wm-shadow: 0 10px 30px rgba(2,6,23,.08);

  --wm-accent:  #8be6ff;
  --wm-accent2: #7aa7ff;
}

html[data-theme="dark"]{
  --wm-bg: #070a12;
  --wm-fg: #e8edf7;
  --wm-muted: rgba(232,237,247,.62);
  --wm-card: rgba(255,255,255,.06);
  --wm-border: rgba(148,163,184,.18);
  --wm-shadow: 0 16px 40px rgba(0,0,0,.35);

  --wm-accent:  #38bdf8;
  --wm-accent2: #3b82f6;
}