/* Vraply design-tokens — één bron van waarheid (docs/merk.md).
   Kleuren, typografie, vorm en ritme; nooit hexcodes elders herhalen. */

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/quicksand-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/quicksand-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-600.woff2') format('woff2');
}

:root {
    /* Kleur (merkdoc p.4) */
    --vr-groen: #12B26A;
    --vr-groen-donker: #0E9457;
    --vr-koraal: #FF6B4A;
    --vr-koraal-donker: #E85A3A;
    --vr-zon: #FFC53D;
    --vr-ink: #17251F;
    --vr-cream: #FBF8F0;
    --vr-wit: #FFFFFF;
    --vr-mint: #E7F6EC;
    --vr-perzik: #FFEFE8;
    --vr-zonlicht: #FFF6E0;
    --vr-zand: #F0EBE0;
    --vr-tekst-zacht: #47554E;
    --vr-lijn: #E5E0D5;

    /* Typografie (merkdoc p.5) */
    --vr-font-kop: 'Quicksand', ui-rounded, system-ui, sans-serif;
    --vr-font-tekst: 'Inter', system-ui, -apple-system, sans-serif;
    --vr-fs-display: clamp(2.25rem, 4.5vw + 1rem, 2.875rem);  /* ~46 */
    --vr-fs-h1: clamp(1.75rem, 3vw + 0.9rem, 2.0625rem);      /* ~33 */
    --vr-fs-h2: 1.375rem;                                     /* 22 */
    --vr-fs-h3: 1rem;                                         /* 16 */
    --vr-fs-body: 1rem;                                       /* 16 */
    --vr-fs-klein: 0.875rem;                                  /* 14 */

    /* Vorm (merkdoc p.6): flinke ronding, zachte randen, nooit zware schaduw */
    --vr-radius-kaart: 18px;
    --vr-radius-pil: 999px;
    --vr-schaduw-zacht: 0 10px 30px rgba(23, 37, 31, 0.07);
    --vr-schaduw-kaart: 0 2px 12px rgba(23, 37, 31, 0.06);

    /* Ritme en interactie */
    --vr-sectie: clamp(3.5rem, 8vw, 6rem);
    --vr-focus: 0 0 0 3px rgba(18, 178, 106, 0.45);
    --vr-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Basis */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--vr-font-tekst);
    font-size: var(--vr-fs-body);
    line-height: 1.55;
    color: var(--vr-ink);
    background: var(--vr-cream);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
    font-family: var(--vr-font-kop);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 0.6em;
}
h1 { font-size: var(--vr-fs-h1); }
h2 { font-size: var(--vr-fs-h2); }
h3 { font-size: var(--vr-fs-h3); }
p { margin: 0 0 1em; }
a { color: var(--vr-groen-donker); }
img, svg { max-width: 100%; height: auto; }

/* Toegankelijkheid: zichtbare focus, altijd (docs/frontend.md) */
:focus-visible {
    outline: none;
    box-shadow: var(--vr-focus);
    border-radius: 6px;
}
::selection { background: var(--vr-mint); }