@layer base {
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body {
        font-family: var(--font-sans);
        font-size: var(--text-base);
        color: var(--text);
        line-height: var(--leading-relaxed);
        background: var(--bg);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    a { color: var(--primary-600); text-decoration: none; transition: color var(--transition); }
    a:hover { color: var(--primary-700); }
    img { max-width: 100%; height: auto; display: block; }
    h1, h2, h3, h4, h5, h6 { color: var(--steel-900); font-weight: 700; line-height: var(--leading-tight); }
    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
    h3 { font-size: var(--text-2xl); }
    h4 { font-size: var(--text-xl); }
    p { margin-bottom: var(--space-4); }
    ul, ol { padding-left: var(--space-6); }
    button, input, select, textarea { font-family: inherit; font-size: inherit; }
    .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-5); }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
}