:root, :root[data-theme="light"] {
  color-scheme: light;
  --surface-canvas: #f6f7f9;
  --surface-panel: #ffffff;
  --surface-raised: #ffffff;
  --surface-subtle: #f0f3f7;
  --surface-hover: #edf0f6;
  --surface-input: #ffffff;
  --text-primary: #222731;
  --text-secondary: #535e6e;
  --text-muted: #626d7c;
  --border-default: #dce1e9;
  --border-strong: #b9c2d0;
  --accent-text: #5945a8;
  --accent-solid: #6250b3;
  --accent-on-solid: #ffffff;
  --accent-hover: #513f9d;
  --accent-soft: #eeebf8;
  --success-text: #176d52;
  --success-surface: #eaf5f0;
  --danger-text: #ac3043;
  --danger-surface: #fbeef0;
  --warning-text: #805b13;
  --warning-surface: #fff6df;
  --info-text: #285b97;
  --info-surface: #eaf2fb;
  --focus-ring: #7459ce;
  --overlay: #141b2b66;
  --shadow-panel: 0 2px 8px #18223608;
  --shadow-popover: 0 16px 48px #18223624;
  --chart-line: #287f76;
  --chart-fill: #287f7626;
  --chart-grid: #dce1e9;
  --chart-label: #535e6e;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-canvas: #111315;
  --surface-panel: #191c20;
  --surface-raised: #22262c;
  --surface-subtle: #20242a;
  --surface-hover: #2b3039;
  --surface-input: #171a1e;
  --text-primary: #edf0f5;
  --text-secondary: #bcc4d1;
  --text-muted: #a2adbd;
  --border-default: #343b46;
  --border-strong: #596576;
  --accent-text: #c0b0fa;
  --accent-solid: #aa94ed;
  --accent-on-solid: #171122;
  --accent-hover: #c4b2ff;
  --accent-soft: #302a43;
  --success-text: #7cdbb1;
  --success-surface: #19392e;
  --danger-text: #ffa0ad;
  --danger-surface: #44252d;
  --warning-text: #f2cd83;
  --warning-surface: #3b3120;
  --info-text: #99c5fc;
  --info-surface: #22344b;
  --focus-ring: #c4b2ff;
  --overlay: #06080bbf;
  --shadow-panel: 0 2px 8px #00000026;
  --shadow-popover: 0 16px 48px #00000070;
  --chart-line: #78d6c2;
  --chart-fill: #78d6c226;
  --chart-grid: #343b46;
  --chart-label: #bcc4d1;
}
html[data-theme], html[data-theme] body {background: var(--surface-canvas) !important; color: var(--text-primary);}