/* =============================================================================
   SoundingKit — base
   Скидання, типографіка, фокус, форми. Жодних кольорів поза токенами.
   ============================================================================= */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

small { font-size: var(--fs-sm); }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }

.mono { font-family: var(--font-mono); }
.num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.dim   { color: var(--ink-2); }

/* ---- фокус: видимий завжди, обведення не ламає розкладку ---------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- пропустити навігацію ---------------------------------------------- */
.skip {
  position: absolute; left: var(--sp-3); top: -60px; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md);
  font-size: var(--fs-md); font-weight: 600; text-decoration: none;
  transition: top var(--dur);
}
.skip:focus { top: var(--sp-3); }

/* ---- форми: базовий вигляд, деталі в components.css -------------------- */
input, select, textarea, button { font: inherit; color: inherit; }
textarea { resize: vertical; }

::placeholder { color: var(--ink-3); opacity: 1; }

/* ---- таблиці ------------------------------------------------------------ */
table { border-collapse: collapse; width: 100%; }

/* ---- зображення --------------------------------------------------------- */
img, svg { max-width: 100%; }
img { height: auto; }

/* ---- допоміжне ---------------------------------------------------------- */
.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;
}
[hidden] { display: none !important; }

.stack > * + * { margin-top: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-end { margin-left: auto; }
.wrap-flex { flex-wrap: wrap; }

/* ---- логотип під тему: обидва в розмітці, видимий один ------------------ */
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark  { display: block; }
}
:root[data-theme="dark"]  .logo-light { display: none; }
:root[data-theme="dark"]  .logo-dark  { display: block; }
:root[data-theme="light"] .logo-light { display: block; }
:root[data-theme="light"] .logo-dark  { display: none; }