/* =========================================================================
   MaxoTools — "instrument bench" design system
   Paper background, brass/slate/rust category accents, mono utility type.
   ========================================================================= */

:root {
  --paper: #F5F2EA;
  --panel: #FFFFFF;
  --ink: #1B1A17;
  --ink-soft: #5B5748;
  --line: #DCD5C4;

  --brass: #A9782C;
  --brass-soft: #F1E6CE;
  --slate: #35566B;
  --slate-soft: #DCE7EC;
  --rust: #A0432A;
  --rust-soft: #F3DFD6;
}

* { -webkit-font-smoothing: antialiased; }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px);
  background-size: 100% 42px;
  background-attachment: fixed;
}

.font-display { font-family: 'Space Grotesk', 'Inter', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ---------- header / status bar ---------- */
.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.status-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--brass);
  box-shadow: 0 0 0 3px var(--brass-soft);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .status-dot { animation: none; }
}

/* ---------- category divider ---------- */
.bench-label {
  letter-spacing: .14em;
  font-size: .7rem;
}

/* ---------- tool card ---------- */
.tool-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position: relative;
}
.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(27,26,23,.28);
}
.tool-card:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}
.tool-card .accent-bar {
  height: 3px;
  border-radius: 4px 4px 0 0;
}
.accent-brass { background: var(--brass); }
.accent-slate { background: var(--slate); }
.accent-rust  { background: var(--rust); }

.chip-brass { background: var(--brass-soft); color: var(--brass); }
.chip-slate { background: var(--slate-soft); color: var(--slate); }
.chip-rust  { background: var(--rust-soft);  color: var(--rust); }

/* ---------- tool page panel ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

textarea.io-field, input.io-field {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
}
textarea.io-field:focus, input.io-field:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px var(--brass-soft);
}

.btn {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  border-radius: 4px;
  transition: background-color .15s ease, transform .1s ease, opacity .15s ease;
  letter-spacing: .01em;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover { background: #34322C; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.stat-pill {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
}

footer.site-footer {
  border-top: 1px solid var(--line);
}

.dropzone {
  border: 1.5px dashed var(--line);
  border-radius: 6px;
  transition: border-color .15s ease, background-color .15s ease;
}
.dropzone.is-dragover {
  border-color: var(--brass);
  background: var(--brass-soft);
}

/* ---------- Content pages (legal, about, blog) ---------- */
.content-prose { color: var(--ink); line-height: 1.75; }
.content-prose h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: .75rem;
  color: var(--ink);
}
.content-prose h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  margin-top: 1.5rem;
  margin-bottom: .5rem;
  color: var(--ink);
}
.content-prose p { margin-bottom: 1rem; color: var(--ink-soft); font-size: .95rem; }
.content-prose ul, .content-prose ol { margin: 0 0 1rem 1.25rem; color: var(--ink-soft); font-size: .95rem; }
.content-prose ul { list-style: disc; }
.content-prose ol { list-style: decimal; }
.content-prose li { margin-bottom: .4rem; }
.content-prose a { color: var(--brass); text-decoration: underline; text-underline-offset: 2px; }
.content-prose a:hover { color: var(--ink); }
.content-prose strong { color: var(--ink); font-weight: 600; }
.content-prose blockquote {
  border-left: 3px solid var(--line);
  padding-left: 1rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: 1rem 0;
}

/* ---------- Blog cards ---------- */
.blog-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; transition: border-color .15s ease; }
.blog-card:hover { border-color: var(--brass); }