@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --bg: #FBF6EC;
  --surface: #FFFFFF;
  --surface-2: #F4EDDE;
  --text: #1E1A14;
  --text-dim: #6B6253;
  --border: #E6DCC8;
  --brand: #1E1A14;
  --on-brand: #FFF8E8;
  --honey: #F4A300;
  --honey-soft: #FFE9B8;
  --leaf: #2F6B4F;
  --leaf-soft: #DCEBDF;
  --danger: #B5482E;
  --radius: 14px;
  --radius-sm: 9px;
  --sans: 'Figtree', system-ui, sans-serif;
  --display: 'Bricolage Grotesque', 'Figtree', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --shadow: 0 1px 0 rgba(30,26,20,.04), 0 6px 20px -12px rgba(30,26,20,.25);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--sans); color: var(--text); background: var(--bg);
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(circle at 1px 1px, rgba(30,26,20,.05) 1px, transparent 0);
  background-size: 22px 22px;
}
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
[x-cloak] { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--brand);
  background: var(--brand); color: var(--on-brand); font: 600 15px var(--sans);
  cursor: pointer; text-decoration: none; transition: transform .12s ease, background .12s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.honey { background: var(--honey); border-color: var(--honey); color: var(--text); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn.ghost:hover { border-color: var(--text); }
.btn.sm { height: 34px; padding: 0 13px; font-size: 13.5px; }
.btn.danger { background: transparent; color: var(--danger); border-color: #EBC3B6; }

.input, .select, .textarea {
  width: 100%; border: 1.5px solid var(--border); background: var(--surface);
  border-radius: var(--radius-sm); padding: 10px 12px; font: 15px var(--sans); color: var(--text);
  outline: none; transition: border-color .12s, box-shadow .12s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--text); box-shadow: 0 0 0 3px var(--honey-soft); }
.textarea { resize: vertical; min-height: 80px; }
.label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.hint { font-size: 13px; color: var(--text-dim); }

.card {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px;
  border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-dim);
}
.chip.honey { background: var(--honey-soft); color: #7A5200; }
.chip.leaf { background: var(--leaf-soft); color: var(--leaf); }
.mono { font-family: var(--mono); }
.err { color: var(--danger); font-size: 14px; }