/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--lh-body);
    font-weight: var(--fw-regular);
    color: var(--color-fg);
    background: var(--color-bg);
    overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
ul, ol { list-style: none; }

/* Container */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}
@media (max-width: 768px) {
    :root { --container-padding: 16px; }
}

.container-narrow { max-width: var(--container-narrow); }

/* Headings — Inter variable, 2026 tight tracking */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    color: var(--color-fg);
}
h1 { line-height: var(--lh-display); letter-spacing: var(--ls-display); }

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

/* Eyebrow — modern utility label (weight 600 per 2026 research) */
.eyebrow {
    display: inline-block;
    font-family: var(--font-sub);
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    color: var(--color-brand);
}

.brand-text {
    font-family: var(--font-brand);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
}

/* Focus */
:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

/* Selection */
::selection {
    background: var(--color-brand);
    color: var(--color-bg);
}