/* ScaffPilot theme tokens. Components read these through CSS custom properties,
   which inherit into every shadow root. data-theme on <html> selects the theme. */

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15181d;
  --bg2: #1b1f26;
  --bg3: #222731;
  --bg-input: #181b21;
  --bg-hover: #262c37;
  --line: #2d3340;
  --line2: #3a4252;
  --text: #d7dce4;
  --text2: #b4bcc9;
  --muted: #8a93a3;
  --dim: #5d6676;
  --accent: #3fb6ff;
  --accent-strong: #2a6fdb;
  --accent-bg: rgba(63, 182, 255, 0.14);
  --accent-line: rgba(63, 182, 255, 0.45);
  --accent-text: #cfeaff;
  --shared: #b36bff;
  --warn: #f0b429;
  --warn-bg: rgba(240, 180, 41, 0.08);
  --danger: #ef5d5d;
  --ok: #4cc38a;
  --measure: #e6c35c;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);

  --vp-bg: #1a1f27;
  --vp-gradient: radial-gradient(ellipse at 50% 35%, #232a35 0%, #171b21 75%);
  --vp-grid-minor: #262d38;
  --vp-grid-major: #323b49;
  --vp-axis-x: #6b3a3a;
  --vp-axis-y: #3a6b45;
  --vp-wall: #8e96a3;
  --vp-roof: #8a4e3c;
  --vp-edge: #2a2f37;
  --vp-hover: #9fd8ff;
  --vp-terrain: #4f6b4a;
  --axis-x: #e5534b;
  --axis-y: #4cc38a;
  --axis-z: #3f8cff;
  --nav-bg: rgba(27, 31, 38, 0.85);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1f5;
  --bg2: #f8f9fb;
  --bg3: #e8ecf1;
  --bg-input: #ffffff;
  --bg-hover: #e3e8ef;
  --line: #d9dee6;
  --line2: #c6cdd8;
  --text: #1d232c;
  --text2: #3a4350;
  --muted: #637083;
  --dim: #96a0ae;
  --accent: #1683d8;
  --accent-strong: #1d64c9;
  --accent-bg: rgba(22, 131, 216, 0.1);
  --accent-line: rgba(22, 131, 216, 0.45);
  --accent-text: #0c4f86;
  --shared: #8a3fd6;
  --warn: #b77a00;
  --warn-bg: rgba(240, 180, 41, 0.12);
  --danger: #c93636;
  --ok: #1f9a5f;
  --measure: #b8860b;
  --shadow: 0 10px 30px rgba(20, 30, 50, 0.18);

  --vp-bg: #dfe4ea;
  --vp-gradient: radial-gradient(ellipse at 50% 35%, #f3f5f8 0%, #d9dee5 80%);
  --vp-grid-minor: #c9d0d9;
  --vp-grid-major: #aeb7c3;
  --vp-axis-x: #d99a9a;
  --vp-axis-y: #95c9a2;
  --vp-wall: #c5cad2;
  --vp-roof: #b2654c;
  --vp-edge: #59606b;
  --vp-hover: #1683d8;
  --vp-terrain: #9db894;
  --nav-bg: rgba(255, 255, 255, 0.85);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.35 Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}

/* sp-app sets its own display (grid) in :host; only size it here */
sp-app { height: 100%; }