/* ============================================================
   Krepko base — reset, body, typography defaults.
   Mobile-first. Reads tokens from tokens.css.
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', -apple-system, sans-serif;
  font-size: var(--ts-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: var(--w-read);
  margin: 0 auto;
  /* Visual audit 2026-05-27 L4: padding-top 16px → 32px чтобы между nav/breadcrumb
     и hero было дыхание (раньше hero вплотную к nav). */
  padding: var(--space-6) var(--space-5) var(--space-8);
}

/* === TYPOGRAPHY === */

h1, h2, h3, h4 {
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
}

h1 {
  font-size: var(--ts-h1);
  line-height: 1.08;
  letter-spacing: -1.2px;
  margin: var(--space-5) 0 var(--space-4);
}

h2 {
  font-size: var(--ts-h2);
  line-height: 1.15;
  letter-spacing: -0.8px;
  margin: var(--space-6) 0 var(--space-4);
}

h3 {
  font-size: var(--ts-h3);
  line-height: 1.25;
  letter-spacing: -0.4px;
  margin: var(--space-5) 0 var(--space-2);
}

h4 {
  font-size: var(--ts-h4);
  line-height: 1.35;
  margin: var(--space-4) 0 var(--space-2);
}

p {
  margin: 0 0 var(--space-3);
  color: var(--text-sub);
  line-height: 1.65;
}

strong { color: var(--text); font-weight: 700; }

a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--t-1);
}
a:hover { text-decoration: underline; }

ul, ol {
  padding-left: var(--space-5);
  margin: 0 0 var(--space-3);
}
li {
  color: var(--text-sub);
  line-height: 1.55;
  margin-bottom: var(--space-1);
}
li::marker { color: var(--gold); }