@layer base {
    body {
        font-family: var(--font-body);
        background: hsl(var(--surface));
        color: var(--text);
        font-size: var(--text-base);
        -webkit-font-smoothing: antialiased;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-heading);
        font-weight: 600;
    }

    /* Scrollbar */
    ::-webkit-scrollbar       { width: 6px; }
    ::-webkit-scrollbar-track { background: hsl(var(--surface)); }
    ::-webkit-scrollbar-thumb { background: hsl(var(--surface-raised)); border-radius: var(--radius-pill); }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
    * { scrollbar-width: thin; scrollbar-color: hsl(var(--surface-raised)) hsl(var(--surface)); }
}