/* ===========================================================
   SYNTHEDGE — BASE / RESET
   File: css/base.css
   Load order: variables.css → base.css → (page-specific css)
   =========================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* prevents iOS auto-zoom-on-input weirdness */
}

body {
  background: var(--bg-base);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden; /* prevents horizontal scroll bugs on mobile from any
                          slightly-overflowing element — real responsiveness
                          insurance, not a hack to hide a layout bug */
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ---------- HEADINGS use display font by default ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* ---------- ACCESSIBILITY: visible focus ring everywhere ----------
   Security/usability note: removing focus outlines (a common but bad
   practice) makes the site unusable for keyboard-only and screen-reader
   users, and makes phishing-style fake-focus attacks easier to disguise.
   We keep a real, visible, on-brand focus ring instead of outline:none. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Remove the default focus ring only for mouse users, never for keyboard */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- SELECTION COLOR (on-brand, not default blue) ---------- */
::selection {
  background: var(--green-soft);
  color: var(--text-1);
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ---------- FORM INPUT SECURITY/UX DEFAULTS ----------
   autocomplete="off" is NOT set globally on purpose — blocking
   password managers is a real anti-pattern that pushes users
   toward weak reused passwords. We rely on per-field autocomplete
   attributes set correctly in each form instead (e.g. "new-password",
   "current-password", "email") — see auth pages. */
input, textarea, select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-1);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

input::placeholder, textarea::placeholder {
  color: var(--text-3);
}

/* Disable the awkward native "show password" icons some browsers inject
   inconsistently — we build our own toggle so behavior is consistent
   across Chrome/Edge/Firefox rather than relying on each browser's own
   (differently-styled) built-in icon. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

/* ---------- UTILITY CLASSES used across every page ---------- */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-amber  { color: var(--amber); }
.text-muted  { color: var(--text-3); }

/* ---------- RESPONSIVE BASE ----------
   Real mobile support starts here: a sane minimum tap target size
   and no fixed widths that overflow small viewports. Component files
   add their own breakpoints on top of this. */
@media (max-width: 768px) {
  .container { padding: 0 var(--space-4); }
  body { font-size: var(--text-sm); }
}

button, a.btn-primary, a.btn-ghost {
  min-height: 40px; /* real tap-target accessibility minimum on touch devices */
}