/* Sandbox UI theme: warm cream / white, crisp hairline panels. All UI pulls colours from these tokens. */
:root {
  --bg: #efe9dd;            /* viewport backdrop */
  --bg-2: #e6dfd0;
  --panel: #fbf8f2;         /* panels, menus */
  --panel-2: #f4efe5;       /* inset areas, inputs */
  --line: #d8cfbe;          /* hairline borders */
  --line-strong: #bfb4a0;
  --fg: #2a2722;            /* text */
  --dim: #7b7466;           /* secondary text */
  --faint: #a59d8d;
  --accent: #1d5c86;        /* ink blue */
  --accent-soft: #dbe7ef;
  --warn: #a8461f;
  --ok: #3d7a3a;
  --radius: 3px;
  --shadow: 0 1px 0 rgba(60, 50, 30, 0.04), 0 6px 18px rgba(60, 50, 30, 0.08);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

html, body { background: var(--bg); color: var(--fg); font: 13px/1.4 var(--font); }

.ui-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.ui-btn {
  font: inherit; color: var(--fg); cursor: pointer;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 4px 10px; line-height: 18px;
}
.ui-btn:hover { border-color: var(--accent); }
.ui-btn:active { background: var(--panel-2); }
.ui-btn.on, .ui-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.ui-btn:disabled { opacity: 0.45; cursor: default; }
.ui-btn.icon { width: 30px; height: 28px; padding: 0; display: inline-grid; place-items: center; }

.ui-input, .ui-select {
  font: inherit; color: var(--fg); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 3px 6px;
}
.ui-input:focus, .ui-select:focus, .ui-btn:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 0; border-color: var(--accent); }

.ui-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.ui-sep { height: 1px; background: var(--line); margin: 8px 0; border: 0; }

input[type="range"] { accent-color: var(--accent); }
input[type="checkbox"] { accent-color: var(--accent); }