/* Reset + typografie. Bewust minimaal — geen normalize.css. */

*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-primary) 30%, transparent) transparent;
    scroll-behavior: smooth;
    scroll-padding-top: var(--site-header-height, 0px);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--color-primary) 55%, transparent);
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--line-base);
    color: var(--color-fg);
    background: var(--color-bg);
}

body.is-scroll-locked {
    overflow: hidden;
}

main { display: block; }

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

a { color: var(--color-link); text-underline-offset: .2em; }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: var(--line-tight);
    font-family: var(--font-display);
}

p { margin: 0 0 var(--space-3); }

/* Buttons — basis variant primary/secondary */
.button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.2;
    transition: transform .12s ease, background .12s ease;
}
.button--primary {
    background: var(--color-primary);
    color: var(--color-primary-fg);
}
.button--secondary {
    background: transparent;
    color: var(--color-fg);
    border: 1px solid var(--color-border);
}
.button:hover { transform: translateY(-1px); }

/* Debug-block onderaan elke pagina — alleen tijdens dev */
.debug {
    margin: var(--space-6) auto;
    max-width: var(--content-max);
    padding: var(--space-3) var(--gutter);
    color: var(--color-fg-muted);
    font-size: .85rem;
}
.debug summary { cursor: pointer; }
.debug table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: var(--space-2); }
.debug th, .debug td { padding: .25rem .5rem; text-align: left; border-bottom: 1px solid var(--color-border); }
.debug code { background: var(--color-bg-soft); padding: .1em .35em; border-radius: var(--radius-sm); }