/* ==========================================================================
   base.css — сброс, типографика, сетка, утилиты.
   НЕ ТРОГАТЬ при смене дизайна. Все цвета, шрифты, радиусы — в theme.css.
   ========================================================================== */

/* --- Маппинг токенов theme.css на короткие имена --- */
:root {
  --bg:           var(--color-bg);
  --surface:      var(--color-surface);
  --surface-soft: var(--color-surface-soft);
  --surface-tint: var(--color-surface-tint);
  --line:         var(--color-line);
  --line-strong:  var(--color-line-strong);
  --ink:          var(--color-ink);
  --ink-muted:    var(--color-ink-muted);
  --ink-soft:     var(--color-ink-soft);
  --green:        var(--color-accent);
  --green-dark:   var(--color-accent-dark);
  --green-soft:   var(--color-accent-soft);
  --brass:        var(--color-second);
  --brass-soft:   var(--color-second-soft);

  /* Шрифты — алиасы для совместимости с product.css */
  --font-display: var(--font-heading);
  --font-text:    var(--font-body);

  /* Доп. поверхности */
  --surface-warn: #fbf1e8;

  --container: 1320px;
  --gutter:    16px;
  --header-h:  88px;
  --card-pad:  28px;
  --card-gap:  24px;
  --focus: 0 0 0 3px var(--surface), 0 0 0 6px var(--green);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-base)/1.6 var(--font-body); padding-top: var(--header-h); }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5rem; line-height: 1.25; font-family: var(--font-heading); font-weight: 700; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
/* У <button>, <input>, <select> шрифт НЕ наследуется: без явного указания
   браузер ставит системный Arial. Ловится только замером — на глаз буквы
   «вроде те же». Так уехали «Reset all filters» в каталоге и крестики
   в окнах. Наследуем только семейство: `font: inherit` сбросил бы ещё и
   вес, и кнопки потеряли бы жирность. */
button, input, select, textarea, optgroup { font-family: inherit; }
a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--green-dark); }
strong { font-weight: 700; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.container { width: 100%; max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.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; }
.text-muted  { color: var(--ink-muted); }
.text-soft   { color: var(--ink-soft); }
.text-green  { color: var(--green); }
.text-mono   { font-family: var(--font-mono); }
.text-label  { font-size: var(--fs-label); }
.text-small  { font-size: var(--fs-small); }
.icon { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; stroke-width: 1.7; }
.stars { color: var(--brass); letter-spacing: .05em; font-size: var(--fs-small); }