/* Webb's Store Tools — shared design system. Hunter-green, client-confirmed palette. Mobile-first. */
:root {
  --green: #4d694b;
  --green-deep: #3a5038;
  --green-dark: #2b3c29;
  --tan: #c8a24a;
  --tan-soft: #e3cf9c;
  --bg: #f7f5f2;
  --ink: #1e100a;
  --ink-soft: #6b5d52;
  --line: #e6e0d7;
  --surface: #ffffff;
  --danger: #a1341f;
  --ok: #4d694b;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --s-1: 6px; --s-2: 12px; --s-3: 18px; --s-4: 24px; --s-5: 36px; --s-6: 56px;

  --shadow-1: 0 1px 2px rgba(30,16,10,.05), 0 3px 8px rgba(30,16,10,.06);
  --shadow-2: 0 1px 2px rgba(30,16,10,.05), 0 8px 20px rgba(30,16,10,.08), 0 18px 40px rgba(77,105,75,.10);
  --shadow-float: 0 2px 6px rgba(30,16,10,.08), 0 20px 48px rgba(43,60,41,.22);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 520px at 85% -10%, rgba(200,162,74,.16), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(77,105,75,.16), transparent 55%);
  background-attachment: fixed;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3, .display {
  font-family: "Oswald", "Open Sans", sans-serif;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.08;
  margin: 0;
}
.eyebrow {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  font-weight: 500;
  color: var(--tan);
}

a { color: var(--green-deep); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--s-3); }

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(247,245,242,.86);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; gap: var(--s-3); height: 64px; }
.topbar .logo { height: 40px; width: auto; display: block; }
.topbar .spacer { flex: 1; }
.topbar .crumb {
  font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .12em;
  font-size: .8rem; color: var(--ink-soft);
}

/* ---------- Buttons ---------- */
.btn {
  --bg-btn: var(--green);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .08em;
  font-size: .92rem; font-weight: 500;
  color: #fff; background: var(--bg-btn);
  border: none; border-radius: var(--r-md); padding: 13px 20px; min-height: 48px;
  cursor: pointer; text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: transform .18s var(--ease-spring), background-color .18s ease, box-shadow .18s ease;
}
.btn:hover { background: var(--green-deep); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0) scale(.99); }
.btn:focus-visible { outline: 3px solid var(--tan); outline-offset: 2px; }
.btn.full { width: 100%; }
.btn.tan { --bg-btn: var(--tan); color: var(--ink); }
.btn.tan:hover { background: #b7902f; }
.btn.ghost {
  background: transparent; color: var(--green-deep); box-shadow: none;
  border: 1.5px solid var(--line);
}
.btn.ghost:hover { background: #fff; border-color: var(--green); transform: translateY(-1px); }
.btn.sm { min-height: 40px; padding: 8px 14px; font-size: .82rem; }
.btn.danger { background: transparent; color: var(--danger); border: 1.5px solid #e7ccc4; box-shadow: none; }
.btn.danger:hover { background: #fbf1ee; transform: translateY(-1px); }

/* ---------- Surfaces ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
label.lbl { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.input {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 14px 16px; min-height: 50px;
  background: #fff; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus-visible {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(77,105,75,.16);
}

.muted { color: var(--ink-soft); }
.center { text-align: center; }
.hidden { display: none !important; }

/* utility chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .76rem; font-weight: 600; color: var(--green-deep);
  background: #eef2ec; border: 1px solid #dde5da;
  padding: 4px 10px; border-radius: 999px;
}
.chip.tan { color: #7a5e15; background: #f7efd9; border-color: #ecdcb0; }

@media (min-width: 768px) {
  .wrap { padding: 0 var(--s-4); }
  .topbar .logo { height: 44px; }
}