:root {
  color-scheme: light dark;

  /* Light theme (system light or no preference) */
  --fs-bg: #ffffff;
  --fs-bg-elevated: #f3f3f3;
  --fs-bg-hover: #e8e8e8;
  --fs-border: #e5e5e5;
  --fs-activity-bg: #ececec;
  --fs-sidebar-bg: #f3f3f3;
  --fs-tab-active-bg: #ffffff;
  --fs-tab-inactive-bg: #ececec;
  --fs-status-bg: #007acc;
  --fs-status-fg: #ffffff;
  /* Secondary line on status bar (worksheet / context) — light blue, not page-muted gray */
  --fs-status-secondary-fg: #c8ecff;
  --fs-fg: #333333;
  --fs-fg-muted: #6a6a6a;
  --fs-accent: #007acc;
  --fs-focus-ring: #007fd4;
  --fs-on-accent: #ffffff;
  --fs-modal-scrim: rgba(0, 0, 0, 0.4);
  --fs-drop-target-outline: rgba(0, 122, 204, 0.5);
  --fs-drop-target-bg: rgba(0, 122, 204, 0.12);
  --fs-link-hover: #005a9e;

  /* Viz colors: outline/axis are fixed brown (scheme-independent); SVG block mirrors in components.css */
  --fs-viz-water-fill: rgba(0, 122, 204, 0.22);
  --fs-viz-water-stroke: #007acc;
  --fs-viz-outline: #8b5a2b;
  --fs-viz-axis: #8b5a2b;
  --fs-viz-curve: #007acc;
  --fs-viz-label: rgba(0, 0, 0, 0.62);
  --fs-viz-marker-fill: #ffffff;
  --fs-viz-marker-stroke: #007acc;

  --fs-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --fs-titlebar-h: 30px;
  --fs-activity-w: 48px;
  --fs-sidebar-w: 260px;
  --fs-tab-h: 35px;
  --fs-status-h: 22px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --fs-bg: #1e1e1e;
    --fs-bg-elevated: #252526;
    --fs-bg-hover: #2a2d2e;
    --fs-border: #3c3c3c;
    --fs-activity-bg: #333333;
    --fs-sidebar-bg: #252526;
    --fs-tab-active-bg: #1e1e1e;
    --fs-tab-inactive-bg: #2d2d2d;
    --fs-status-bg: #007acc;
    --fs-status-fg: #ffffff;
    --fs-status-secondary-fg: #b8e8ff;
    --fs-fg: #cccccc;
    --fs-fg-muted: #858585;
    --fs-accent: #007acc;
    --fs-focus-ring: #007fd4;
    --fs-on-accent: #ffffff;
    --fs-modal-scrim: rgba(0, 0, 0, 0.5);
    --fs-drop-target-outline: rgba(79, 195, 247, 0.65);
    --fs-drop-target-bg: rgba(79, 195, 247, 0.18);
    --fs-link-hover: #4fc3f7;

    --fs-viz-water-fill: rgba(79, 195, 247, 0.35);
    --fs-viz-water-stroke: rgba(79, 195, 247, 0.95);
    --fs-viz-outline: #8b5a2b;
    --fs-viz-axis: #8b5a2b;
    --fs-viz-curve: rgba(79, 195, 247, 0.95);
    --fs-viz-label: rgba(255, 255, 255, 0.78);
    --fs-viz-marker-fill: rgba(255, 255, 255, 0.9);
    --fs-viz-marker-stroke: rgba(79, 195, 247, 0.95);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  font-family: var(--fs-font);
  font-size: 13px;
  color: var(--fs-fg);
  background: var(--fs-bg);
}

button {
  font: inherit;
  color: inherit;
}