/* ============================================================
   БАЗА: сброс, типографика, ссылки. Ничего компонентного.
   ============================================================ */
@layer base {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

  body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.5;
   /* background: var(--color-bg);*/
    color: var(--color-text);
  }

  a { color: var(--color-primary); text-decoration: none; }
  a:hover { color: var(--color-primary-hover); text-decoration: underline; }

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

  /* На мобиле 16px в инпутах — иначе iOS зумит страницу при фокусе */
  button, input, select, textarea { font: inherit; color: inherit; }
  @media (max-width: 639px) {
    input, select, textarea { font-size: 16px; }
  }

  ::selection { background: var(--color-primary-light); }

  h1 { font-size: var(--fs-3xl); font-weight: 600; line-height: 1.25; margin-bottom: var(--sp-3); }
  h2 { font-size: var(--fs-xl); font-weight: 600; margin: var(--sp-5) 0 var(--sp-2); }
  h3 { font-size: var(--fs-lg); font-weight: 600; margin: var(--sp-4) 0 var(--sp-2); }
  h4 { font-size: var(--fs-base); font-weight: 600; color: var(--color-text-secondary); margin: var(--sp-3) 0 var(--sp-1); }

  p, ul, ol { margin-bottom: var(--sp-3); color: var(--color-text-secondary); }
  ul, ol { padding-left: var(--sp-5); }

  .small, .small-text { font-size: var(--fs-sm); color: var(--color-text-muted); }
  .mono { font-family: var(--font-mono); }
}