/* DMLLM theme tokens.
   Dark is the original palette (every value below is the hex the pages used
   to hard-code); light is the new one. /theme.js sets data-theme on <html>
   before first paint. Pages reference these as var(--token, #fallback) so a
   missing stylesheet degrades to the original dark look. */
:root {
  color-scheme: dark;
  --bg0: #0d0d0d;        /* inputs, code, deepest surface */
  --bg1: #111111;        /* page */
  --bg2: #161616;        /* cards */
  --bg3: #1e1e1e;        /* hover, chips, nested surfaces */
  --bg4: #2f2f2f;        /* pressed / strong surface */
  --line1: #2a2a2a;      /* hairline border */
  --line2: #3a3a3a;      /* stronger border */
  --text1: #f9fafb;
  --text2: #e5e7eb;
  --text3: #d1d5db;
  --text4: #9ca3af;
  --text5: #6b7280;
  --accent: #8532c0;
  --accent-hover: #9b3de0;
  --accent-text: #c084fc; /* accent used AS text / links on dark */
  --accent-soft: #d8b4fe;
  --ok: #34d399;  --ok2: #4ade80;  --ok3: #22c55e;  --ok4: #16a34a;
  --danger: #f87171; --danger2: #dc2626; --danger3: #ef4444;
  --danger-soft: #fca5a5; --danger-softer: #fecaca;
  --warn: #fbbf24; --warn2: #facc15; --warn3: #f59e0b; --orange: #fb923c;
  --info: #60a5fa;
  --tint-info: #121724; --tint-info-line: #2a3654;
  --tint-accent: #1b1424; --tint-accent-line: #44245c; --tint-accent-2: #2a1840;
  --tint-warn: #2a2410; --tint-warn-line: #4a3f10;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg0: #f0f2f6;
  --bg1: #f4f5f9;
  --bg2: #ffffff;
  --bg3: #eceef4;
  --bg4: #e1e4ec;
  --line1: #dde1ea;
  --line2: #c6ccd8;
  --text1: #111827;
  --text2: #1f2937;
  --text3: #374151;
  --text4: #4b5563;
  --text5: #6b7280;
  --accent: #8532c0;
  --accent-hover: #7a2bb3;
  --accent-text: #6d28d9;
  --accent-soft: #7c3aed;
  --ok: #059669;  --ok2: #16a34a;  --ok3: #16a34a;  --ok4: #15803d;
  --danger: #dc2626; --danger2: #b91c1c; --danger3: #dc2626;
  --danger-soft: #b91c1c; --danger-softer: #991b1b;
  --warn: #b45309; --warn2: #a16207; --warn3: #d97706; --orange: #ea580c;
  --info: #2563eb;
  --tint-info: #e9f0fd; --tint-info-line: #b9cdf4;
  --tint-accent: #f3ebfb; --tint-accent-line: #d6c2f0; --tint-accent-2: #ece2f8;
  --tint-warn: #fdf4dd; --tint-warn-line: #e7cf8b;
  --shadow: 0 10px 30px rgba(17,24,39,.12);
}

/* Theme toggle button: pages give it their own header-button class; this
   only styles the floating fallback used on pages without a header slot. */
.theme-toggle-floating {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 9000;
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  background: var(--bg2); border: 1px solid var(--line2); color: var(--text4);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
}
.theme-toggle-floating:hover { color: var(--text1); border-color: var(--accent); }
[data-theme-toggle] svg { width: 16px; height: 16px; }

/* Tabulator (portal grid) ships a dark "midnight" theme; re-skin it from the
   tokens in light mode so the grid matches the page. */
:root[data-theme="light"] .tabulator { background: var(--bg2); border-color: var(--line1); color: var(--text1); }
:root[data-theme="light"] .tabulator .tabulator-tableholder { background: var(--bg2); }
:root[data-theme="light"] .tabulator-row { background: var(--bg2); color: var(--text1); }
:root[data-theme="light"] .tabulator-row.tabulator-row-even { background: var(--bg1); }
:root[data-theme="light"] .tabulator-row:hover { background: var(--bg3); }
:root[data-theme="light"] .tabulator-row .tabulator-cell { border-color: var(--line1); }
:root[data-theme="light"] .tabulator .tabulator-footer,
:root[data-theme="light"] .tabulator .tabulator-footer .tabulator-page,
:root[data-theme="light"] .tabulator .tabulator-footer .tabulator-page-size { background: var(--bg1); color: var(--text2); border-color: var(--line1); }
:root[data-theme="light"] .tabulator .tabulator-footer .tabulator-page.active { color: var(--accent-text); }
/* The midnight theme paints the pager's TEXT white too — counter, labels,
   page buttons, page-size select. */
:root[data-theme="light"] .tabulator .tabulator-footer,
:root[data-theme="light"] .tabulator .tabulator-footer .tabulator-footer-contents,
:root[data-theme="light"] .tabulator .tabulator-footer .tabulator-paginator,
:root[data-theme="light"] .tabulator .tabulator-footer .tabulator-paginator label,
:root[data-theme="light"] .tabulator .tabulator-footer .tabulator-page-counter,
:root[data-theme="light"] .tabulator .tabulator-footer .tabulator-page { color: var(--text2); }
:root[data-theme="light"] .tabulator .tabulator-footer .tabulator-page:disabled { color: var(--text5); }
:root[data-theme="light"] .tabulator .tabulator-footer .tabulator-page-size { color: var(--text1); background: var(--bg2); border-color: var(--line2); }
:root[data-theme="light"] .tabulator .tabulator-header .tabulator-header-filter input,
:root[data-theme="light"] .tabulator .tabulator-header .tabulator-header-filter select { color: var(--text1); background: var(--bg2); border-color: var(--line2); }
:root[data-theme="light"] .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents { color: var(--text4); }
:root[data-theme="light"] .tabulator-edit-select-list, :root[data-theme="light"] .tabulator-edit-list { background: var(--bg2); color: var(--text1); border-color: var(--line1); }

/* Native controls follow the theme. */
:root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea { color-scheme: light; }