/* ESG-X web theme: maps the variables the pages are built on (fill.css, app.css, studio.css, workbench.css) to the
   shared design tokens (tokens.css, generated from esgx/ui/theme.py) — one palette for desktop and web, light and dark. */
/* :root:not(#esgx) outranks the pages' own :root / dark-mode blocks; the tokens themselves switch light/dark */
:root:not(#esgx) {
  /* 总控台 (studio.css) names */
  --panel: var(--surface); --panel-2: var(--surface-alt); --ink: var(--text); --line: var(--border); --line-2: var(--border-strong);
  --laterite: var(--primary); --nickel: var(--good); --sulfur: var(--warn); --err: var(--bad); --na: var(--info); --sel: var(--primary-soft);
  --display: var(--font-display); --body: var(--font-ui);
  --violet: var(--brand-a); --blue: var(--brand-b); --green: var(--accent); --primary-dark: var(--primary-press);
  --faint: var(--subtle); --solid: var(--surface); --soft: var(--surface-alt); --surface-strong: var(--surface);
  --app-bg: linear-gradient(135deg, var(--bg-top) 0%, var(--bg) 50%, var(--bg-bottom) 100%);
  --nav-bg: linear-gradient(175deg, var(--nav-a) 0%, var(--nav-b) 55%, var(--nav-c) 100%);
  --brand: linear-gradient(90deg, var(--brand-a) 0%, var(--brand-b) 100%);
  --brand-hover: linear-gradient(90deg, var(--primary-hover) 0%, var(--brand-b) 100%);
  --header-bg: var(--surface-alt);
  /* --shadow / --shadow-lg come from the tokens: soft card elevation (4.0 ESG-Hub layout) */
  --shadow-hover: 0 0 0 3px rgba(63, 125, 34, .12);
  --font: var(--font-ui); --mono: var(--font-mono);
}
body { background: var(--app-bg) fixed; background-color: var(--bg); color: var(--text); font-family: var(--font-ui);
  font-feature-settings: "tnum" 1; text-rendering: optimizeLegibility; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--selection); }
a { color: var(--link); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* the old bright brand gradient is replaced by the calm ink rail; accents keep the brand colour */
.btn, button.primary { background: var(--brand); border-color: var(--brand-a); color: var(--on-primary); }
.btn:hover { background: var(--brand-hover); filter: none; box-shadow: var(--shadow-hover); }
.btn.sec, .btn.sub { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn.sub { color: var(--link); border-color: var(--primary); }
/* surfaces the page styles wrote as translucent white: from the tokens, so dark mode stays dark and text stays legible */
.q-html, .q-input, .q-select, .q-textarea, .q-number, .q-date, .q-btn, .q-tablewrap, .q-tree, .q-list, .q-vec, .q-menu, .wb-dlg,
.field input, .field select, .inp, .btn.secondary, .btn.danger, .tbl-wrap, .code, .modal-box, .bdg { background-color: var(--surface); color: var(--text); }
.q-btn:hover, .btn.secondary:hover { background-color: var(--surface-alt); }
.q-btn:disabled, .q-btn.dis, .q-input[readonly], .q-textarea[readonly] { background-color: var(--sunken); }
.q-btn:disabled, .q-btn.dis { color: var(--subtle); }
.q-box.TopBar, .TopBar, .q-status { background-color: var(--overlay); }
.auth-card { background-color: var(--overlay); border-color: var(--border); }