/* Miconomics theme — mirrors njs-mi globals.css verbatim.
 * Source: improj/njs-proj/miconomics/src/app/globals.css
 * Canonical xcode copy: vjs-proj/xcode/css/themes/mi.css */
:root {
  --canvas:      #f8f7f4;
  --surface:     #ffffff;
  --ink:         #111111;
  --ink-muted:   #6b7280;
  --border:      #e8e8e6;
  --sidebar:     #0c0c0c;
  --sidebar-text:#a1a1aa;
  --gain:        #10b981;
  --loss:        #ef4444;

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ── Dark themes — user-selectable via the topbar theme menu (data-theme on
 * <html>, persisted in localStorage 'mi-theme'). Mirrors the vjs-sr
 * three-level model: light (default) · dark-subtle · dark-deep. Every
 * surface reads these vars, so the app chrome follows automatically; chart
 * SVG contrast is handled separately in js/charts/utils.js. */
:root[data-theme="dark-subtle"] {
  --canvas:       #1a1d23;
  --surface:      #242832;
  --ink:          #e5e7eb;
  --ink-muted:    #9ca3af;
  --border:       #2f3540;
  --sidebar:      #14161b;
  --sidebar-text: #9ca3af;
  --gain:         #34d399;
  --loss:         #f87171;
}
:root[data-theme="dark-deep"] {
  --canvas:       #0a0b0d;
  --surface:      #14161b;
  --ink:          #f3f4f6;
  --ink-muted:    #a1a5ad;
  --border:       #1f242c;
  --sidebar:      #000000;
  --sidebar-text: #a1a5ad;
  --gain:         #34d399;
  --loss:         #f87171;
}

/* Smooth the flip. */
html, body { transition: background-color 0.15s, color 0.15s; }

/* The wordmark logo bars carry inline fill="#0c0c0c"; drive them from --ink
 * (CSS wins over the presentation attribute) so they invert in dark mode. */
.dash-logo-mark rect { fill: var(--ink); }