/* ═══════════════════════════════════════════════════════
   create-user/styles/base.css
   Reset, body, scrollbar, form elements
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Fira+Mono:wght@400;500&display=swap');

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

html, body, #root {
  min-height: 100%;
}

body {
  font-family: var(--font-ui);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--font-size-body);
  line-height: var(--line-height);
}

/* Scrollbar */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: rgba(22,27,35,0.6); }
::-webkit-scrollbar-thumb { background: #0d9488; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

/* Form resets */
input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
}
button { cursor: pointer; border: none; background: none; }

input::placeholder,
textarea::placeholder { color: var(--color-text-muted) !important; }
input[type=number]::-webkit-inner-spin-button { opacity: 0.4; }
input[type=checkbox] { accent-color: var(--color-accent-fill); }

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Code / mono */
code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--color-accent-text);
  background: var(--color-surface-hov);
  padding: 2px 5px;
  border-radius: var(--r-xs);
}