/* Vibe Tools: shared design tokens and base components.
   Used by the homepage. Tool pages are standalone and carry their own styles. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap');

:root {
  --bg: #fafaf9;
  --surface: #ffffff;
  --surface-2: #f4f4f2;
  --text: #18181b;
  --muted: #5f5f66;
  --faint: #737379;
  --border: #e5e5e2;
  --border-strong: #cfcfca;
  --brand: #f05a28;
  --focus: #2563eb;
  --good: #15803d;
  --bad: #c2410c;
  --radius: 10px;
  --radius-sm: 6px;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0d0e; --surface: #151517; --surface-2: #1c1c1f; --text: #ededee;
    --muted: #a1a1a8; --faint: #85858c; --border: #26262a; --border-strong: #38383d;
    --brand: #ff6a3d; --focus: #60a5fa;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d0d0e; --surface: #151517; --surface-2: #1c1c1f; --text: #ededee;
  --muted: #a1a1a8; --faint: #85858c; --border: #26262a; --border-strong: #38383d;
  --brand: #ff6a3d; --focus: #60a5fa;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text); font-family: var(--sans);
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100vh;
}
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--brand); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Inputs */
input[type=text], input[type=search], input[type=number], textarea, select {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; width: 100%;
  transition: border-color .15s;
}
input:hover, textarea:hover, select:hover { border-color: var(--border-strong); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); }

/* Buttons */
button, .btn {
  font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer;
  border-radius: var(--radius-sm); padding: 7px 12px; min-height: 36px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: border-color .15s, background-color .15s;
}
button:hover, .btn:hover { border-color: var(--border-strong); background: var(--surface-2); }
button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
button.ghost:hover { color: var(--text); background: var(--surface-2); }
button.icon { width: 36px; padding: 0; }
button svg { width: 18px; height: 18px; }

/* Ad slot: reserves space up front so the page doesn't jump when an ad loads. */
.ad-slot { margin: 0 auto; text-align: center; }
.ad-slot__label {
  display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 6px;
}
.ad-slot__frame {
  display: grid; place-items: center; width: 100%; max-width: 728px; min-height: 90px; margin: 0 auto;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--faint); font-family: var(--mono); font-size: .75rem;
}
@media (max-width: 600px) { .ad-slot__frame { min-height: 100px; } }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: var(--radius);
  opacity: 0; transition: .2s; pointer-events: none; font-weight: 500; z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }