/* emdm-ui theme.css — light/dark surfaces via [data-theme]. Default = light. */
:root, [data-theme="light"] {
  --bg:        var(--emdm-gray-50);
  --bg-elev:   var(--emdm-white);
  --bg-sunken: var(--emdm-gray-100);
  --text:      var(--emdm-gray-900);
  --text-muted:var(--emdm-gray-500);
  --border:    var(--emdm-gray-200);
  --border-strong: var(--emdm-gray-300);
  --overlay:   rgba(15,17,21,.45);
}
[data-theme="dark"] {
  --bg:        var(--emdm-gray-900);
  --bg-elev:   var(--emdm-gray-800);
  --bg-sunken: var(--emdm-black);
  --text:      var(--emdm-gray-50);
  --text-muted:var(--emdm-gray-400);
  --border:    var(--emdm-gray-700);
  --border-strong: var(--emdm-gray-600);
  --overlay:   rgba(0,0,0,.6);
}
/* Respect OS preference when no explicit theme set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: var(--emdm-gray-900); --bg-elev: var(--emdm-gray-800);
    --bg-sunken: var(--emdm-black); --text: var(--emdm-gray-50);
    --text-muted: var(--emdm-gray-400); --border: var(--emdm-gray-700);
    --border-strong: var(--emdm-gray-600); --overlay: rgba(0,0,0,.6);
  }
}
body.emdm { background: var(--bg); color: var(--text); font-family: var(--font-sans); }