/* ================================================================
   Methodist Booster — Base
   Reset + типографика + body + утилиты
   ================================================================ */

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: var(--text);
    background:
        radial-gradient(900px 900px at 12% -8%, var(--tint-coral) 0%, transparent 60%),
        radial-gradient(1100px 1100px at 88% -4%, var(--tint-mint) 0%, transparent 60%),
        radial-gradient(900px 900px at 50% 110%, var(--tint-rose) 0%, transparent 60%),
        radial-gradient(700px 700px at 0% 60%,  var(--tint-blue) 0%, transparent 60%),
        var(--bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    margin: 0;
    line-height: var(--lh-tight);
    color: var(--text);
    letter-spacing: -0.3px;
}
h1 { font-size: var(--fs-h1);  font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2);  font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3);  font-weight: var(--fw-semi); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-body-lg); font-weight: var(--fw-semi); }

p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--accent-blue);
    text-decoration: none;
    transition: color var(--t) var(--ease);
}
a:hover { color: var(--accent-blue-deep); }

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

/* ---------- Контейнеры ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--s-4);
}
.container-narrow { max-width: var(--container-narrow); }
.container-wide   { max-width: var(--container-wide); }

/* ---------- Секции ---------- */
section { padding: var(--s-6) 0; }

@media (max-width: 768px) {
    section { padding: var(--s-5) 0; }
}

/* ---------- Утилиты ---------- */
.muted     { color: var(--text-muted); }
.soft      { color: var(--text-soft); }
.eyebrow   {
    display: inline-block;
    font-size: var(--fs-micro);
    font-weight: var(--fw-semi);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--s-2);
}
.lead {
    font-size: var(--fs-body-lg);
    color: var(--text-muted);
    line-height: var(--lh-normal);
}

/* ---------- Focus ring (универсальный, доступный) ---------- */
:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}