/* ==========================================================================
   Health & Cooking — base: reset, tokens, typography
   ========================================================================== */

:root {
    /* Brand (uit het logo) */
    --color-lime: #97c11f;
    --color-lime-dark: #7ea315;
    --color-lime-soft: #eef3e0;
    --color-charcoal: #1d1d1b;
    --color-charcoal-soft: #2a2a27;

    /* Ondersteunend */
    --color-forest: #2e4a1f;
    --color-cream: #f7f4ec;
    --color-cream-dark: #eee9dc;
    --color-white: #ffffff;
    --color-text: #1d1d1b;
    --color-text-muted: #5f6157;
    --color-text-light: #f7f4ec;
    --color-line: rgba(29, 29, 27, 0.12);
    --color-line-light: rgba(247, 244, 236, 0.18);

    /* Semantisch */
    --color-primary: var(--color-lime);
    --color-bg: var(--color-cream);

    /* Typografie */
    --font-sans: "Figtree", "Helvetica Neue", Arial, sans-serif;
    --font-script: "Kalam", "Comic Sans MS", cursive;

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1.0625rem;
    --fs-md: 1.1875rem;
    --fs-lg: 1.375rem;
    --fs-xl: clamp(1.625rem, 1.2rem + 1.5vw, 2.25rem);
    --fs-2xl: clamp(2.125rem, 1.4rem + 2.6vw, 3.5rem);
    --fs-3xl: clamp(2.625rem, 1.5rem + 4vw, 4.75rem);

    --lh-tight: 1.05;
    --lh-snug: 1.2;
    --lh-body: 1.6;

    /* Spacing */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;
    --sp-32: 8rem;

    --section-y: clamp(4rem, 3rem + 5vw, 8rem);
    --container: 1240px;
    --gutter: clamp(1.25rem, 4vw, 3rem);

    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 10px;

    --shadow-soft: 0 24px 60px -30px rgba(29, 29, 27, 0.35);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Eetbaar blaadje als opsommingsteken (basilicum), kleur via background op het element */
    --leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 2.5c-9.6-.6-16.4 4.2-17.6 11.2-.5 2.8.2 5.2 1.4 7-.9-6.2 3.2-11.6 9.6-14.4-5.2 3.4-8.2 8.6-7.4 14.6 7.8 1.3 13.6-4.3 14.1-12.1.2-2.2 0-4.3-.1-6.3z'/%3E%3C/svg%3E");
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

dl,
dd,
figure,
blockquote,
address {
    margin: 0;
    font-style: normal;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}

/* Typografie ------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: var(--lh-snug);
    color: var(--color-charcoal);
}

h1 {
    font-size: var(--fs-3xl);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: -0.035em;
}

h2 {
    font-size: var(--fs-2xl);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

h3 {
    font-size: var(--fs-lg);
}

h4 {
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

h1 em,
h2 em {
    font-style: normal;
    color: var(--color-lime-dark);
}

p {
    margin: 0 0 var(--sp-4);
}

p:last-child {
    margin-bottom: 0;
}

.lead {
    font-size: var(--fs-md);
    line-height: 1.55;
}

/* Eyebrow: altijd in de handgeschreven letter van de logo-tagline, zonder streepje */
.eyebrow {
    display: block;
    margin: 0 0 var(--sp-2);
    font-family: var(--font-script);
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-lime-dark);
}

.eyebrow--light {
    color: var(--color-lime);
}

::selection {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}