/* ─────────────────────────────────────────────────────────────────────
 * theme.css — shared theme for ObieWebApp2
 * Light-brown / parchment background, warm accents.
 * ───────────────────────────────────────────────────────────────────── */

:root {
  --bg:        #f3e7d3;   /* light brown / parchment */
  --bg-deep:   #e8d8be;   /* slightly darker brown for surfaces */
  --surface:   #fbf3e3;   /* card surface */
  --border:    #c9b48f;
  --text:      #3a2e1d;
  --muted:     #7a6749;
  --accent:    #b35c00;   /* burnt-orange */
  --accent-2:  #ff6f00;   /* primary plot/data color */
  --accent-3:  #6e8b3d;   /* olive accent */
  --shadow:    0 1px 3px rgba(80, 50, 10, 0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
}

/* ─── Page header (shared across tool pages) ──────────────────────── */
header.obie-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
}
header.obie-header a.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
header.obie-header .logo-icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
header.obie-header h1 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.3px;
}
header.obie-header .crumb {
  color: var(--muted);
  font-size: 0.95rem;
}
header.obie-header .gap { flex: 1; }

/* ─── Generic surfaces ────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
}

/* ─── Buttons ─────────────────────────────────────────────────────── */
.btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover:not(:disabled) {
  background: var(--bg-deep);
  border-color: var(--accent);
}
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.btn.primary:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); }

/* ─── Form controls ───────────────────────────────────────────────── */
input[type=number], input[type=text], select {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 0.9rem;
  color: var(--text);
  font-family: inherit;
}
input:focus, select:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
label { font-size: 0.85rem; color: var(--muted); }

/* ─── Helpers ─────────────────────────────────────────────────────── */
.muted { color: var(--muted); }
.center { text-align: center; }
hr.divider { border: none; border-top: 1px solid var(--border); margin: 18px 0; }