/* ==========================================================================
   Bloom & Balance — design tokens
   Bron: Bloom & Balance design system (tokens.json). Pas kleuren, type en
   ruimte enkel hier aan; alle andere bestanden gebruiken deze variabelen.
   ========================================================================== */

/* Fonts: lokaal gehost (geen Google Fonts → geen externe request, GDPR-vriendelijk) */
@font-face {
    font-family: "Suranna";
    src: url("../assets/fonts/Suranna-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Mulish";
    src: url("../assets/fonts/Mulish-Variable.woff2") format("woff2");
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Mulish";
    src: url("../assets/fonts/Mulish-Variable-Italic.woff2") format("woff2");
    font-weight: 200 1000;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Kleur — merkpalet */
    --roze: #bd9a96;
    --wit: #ffffff;
    --poederroze: #f7efed;
    --zand: #efe4dc;
    --rozenhout: #8a625d;
    --rozenhout-hover: #74504b;
    --nachtaarde: #2b211f;
    --aarde: #4a3b38;
    --kaarslicht: #c98b4e;
    --lijn: #e4d6d2;
    --veldrand: #a88f8a;
    --tekst-op-donker: #efe4e1;
    --zacht-vlak: #e9d9d5;
    /* Verloop voor lichtroze secties: een lichte Bloom-roze gloed in het midden die naar de vier hoeken
       uitdeint tot poederroze. Oudere browsers zonder color-mix() tonen gewoon effen poederroze. */
    --gloed-zacht: color-mix(in srgb, var(--roze) 45%, var(--poederroze));
    --verloop-zacht: radial-gradient(ellipse farthest-corner at 50% 50%, var(--gloed-zacht) 0%, var(--poederroze) 100%);

    /* Kleur — semantisch */
    --surface: var(--wit);
    --surface-soft: var(--poederroze);
    --surface-brand: var(--roze);
    --surface-dark: var(--nachtaarde);
    --ink: var(--aarde);
    --ink-heading: var(--nachtaarde);
    --accent: var(--rozenhout);
    --accent-hover: var(--rozenhout-hover);
    --focus: var(--rozenhout);
    --fout: #9b3b32;

    /* Typografie */
    --font-titel: "Suranna", "Cormorant Garamond", Georgia, serif;
    --font-tekst: "Mulish", "Segoe UI", system-ui, sans-serif;

    --fs-display: clamp(2.6rem, 1.7rem + 3.9vw, 5.5rem);   /* 42 → 88 */
    --fs-h1: clamp(2.5rem, 1.9rem + 2.6vw, 4rem);           /* 40 → 64 */
    --fs-h2: clamp(2rem, 1.6rem + 1.7vw, 3rem);             /* 32 → 48 */
    --fs-h3: clamp(1.625rem, 1.5rem + .55vw, 2rem);         /* 26 → 32 */
    --fs-h4: 1.375rem;                                       /* 22 — minimum voor Suranna */
    --fs-citaat: clamp(1.875rem, 1.6rem + 1vw, 2.375rem);   /* 30 → 38 */
    --fs-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); /* 18 → 21 */
    --fs-body: 1.0625rem;                                    /* 17 */
    --fs-small: .875rem;                                     /* 14 */
    --fs-label: .75rem;                                      /* 12 */

    /* Ruimte */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 72px;
    --space-8: 120px;
    --container: 1100px;
    --container-breed: 1280px;
    --gutter: 20px;
    --sectie-padding: 56px;              /* mobiel (was 72px) */

    /* Vorm */
    --radius-knop: 999px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-foto: 12px;
    --radius-band: 56px;
    --radius-pill: 999px;

    /* Schaduw */
    --shadow-kaart: 0 18px 40px -24px rgba(43, 33, 31, .35);
    --shadow-gloed: 0 28px 60px -22px rgba(201, 139, 78, .75), 0 10px 24px -14px rgba(43, 33, 31, .35);
    --shadow-menu: 0 24px 48px -20px rgba(43, 33, 31, .30);

    /* Beweging — traag en zacht */
    --duur: 400ms;
    --duur-traag: 800ms;
    --ease: cubic-bezier(.22, .61, .36, 1);

    /* Header */
    --header-hoogte-mobiel: 68px;
    --header-rand: clamp(24px, 3vw, 48px);  /* afstand logo/menu tot de rand van het scherm (desktop) */
}