/*
 Theme Name: Stuwit Core Child
 Template: stuwit-core/theme
*/

/* Sitefont: Stack Sans (lokaal, /stack-sans/) — Headline voor koppen, Text voor lopende tekst */
@font-face {
    font-family: "Stack Sans Headline";
    src: url("stack-sans/StackSansHeadline-VariableFont_wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Stack Sans Text";
    src: url("stack-sans/StackSansText-VariableFont_wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --site-font-family: "Stack Sans Text";
    --site-font-family-display: "Stack Sans Headline";
    --font-display: var(--site-font-family-display), sans-serif;
    --font-sans: var(--site-font-family), system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    /* ============================================================
       Brand palette — KooyGrow
       Merk heeft maar 2 kernkleuren (groen + lichtgroen), geen 8/9
       kleuren zoals bij andere projecten. Bron: kooygrow-logo-2026.svg
       / kooy-brand-1.svg.
       ============================================================ */
    --brand-1: #009444; /* groen — primair */
    --brand-2: #8dc63f; /* lichtgroen — secundair */

    /* Neutrale tinten uit dezelfde huisstijl-set (geen merkkleuren) */
    --color-dark-tone: #414042; /* donker — tekst, headings, inverse secties */
    --color-grey-tone: #939598; /* grijs — zachte/neutrale achtergronden */
    --color-inverse-tone: #000000; /* zeer donkergroen — los van primary, alleen voor bg/fill/stroke-surface-inverse */

    /* Semantic tokens (gebruik deze in components/utilities) */
    --color-primary: var(--brand-1);
    --color-secondary: var(--brand-2);
    --color-accent: var(--color-dark-tone);

    --color-foreground: var(--color-dark-tone);
    --color-muted: var(--color-grey-tone);
    --color-muted-80: color-mix(in srgb, var(--color-grey-tone), var(--color-dark-tone));
    --color-prose-body: var(--color-muted-80);
    --color-prose-invert-body: color-mix(in srgb, var(--color-background) 82%, transparent);
    --color-prose-invert-captions: color-mix(in srgb, var(--color-background) 72%, transparent);
    --color-prose-invert-border: color-mix(in srgb, var(--color-background) 28%, transparent);
    --color-prose-on-dark-body: color-mix(in srgb, var(--color-background) 82%, transparent);
    --color-prose-on-dark-captions: color-mix(in srgb, var(--color-background) 72%, transparent);
    --color-prose-on-dark-border: color-mix(in srgb, var(--color-background) 28%, transparent);
    --color-background: #ffffff;
    --color-surface: #ffffff;
    --color-surface-alt: var(--brand-2);
    --color-border: color-mix(in srgb, var(--color-grey-tone) 35%, white);
    --color-heading-default: var(--color-dark-tone);
    --color-heading-inverse: #ffffff;

    /* Backward-compat aliases used by parent CSS */
    --color-dark: var(--color-dark-tone);

    /* Typography plugin */
    --tw-prose-body: var(--color-foreground);
    --tw-prose-invert-body: var(--color-background);
}

.bg-surface {
    background-color: var(--color-surface);
    color: var(--color-foreground);
}

.bg-brand-2 {
    background-color: var(--color-dark-tone);
}

.bg-surface-alt {
    background-color: var(--color-surface-alt);
}

.bg-surface-soft {
    background-color: var(--color-grey-tone);
    color: var(--color-foreground);
}

.bg-surface-inverse {
    background-color: var(--color-inverse-tone);
    color: var(--color-background);
}

.bg-surface-inverse-alt {
    background-color: var(--color-dark-tone);
    color: var(--color-background);
}

.fill-surface {
    fill: var(--color-surface);
}

.stroke-surface {
    stroke: var(--color-surface);
}

.fill-surface-alt {
    fill: var(--color-surface-alt);
}

.stroke-surface-alt {
    stroke: var(--color-surface-alt);
}

.fill-surface-soft {
    fill: var(--color-grey-tone);
}

.stroke-surface-soft {
    stroke: var(--color-grey-tone);
}

.fill-surface-inverse {
    fill: var(--color-inverse-tone);
}

.stroke-surface-inverse {
    stroke: var(--color-inverse-tone);
}

.fill-surface-inverse-alt {
    fill: var(--color-dark-tone);
}

.stroke-surface-inverse-alt {
    stroke: var(--color-dark-tone);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-heading-default);
}

.bg-surface-inverse h1,
.bg-surface-inverse h2,
.bg-surface-inverse h3,
.bg-surface-inverse h4,
.bg-surface-inverse h5,
.bg-surface-inverse h6,
.bg-surface-inverse-alt h1,
.bg-surface-inverse-alt h2,
.bg-surface-inverse-alt h3,
.bg-surface-inverse-alt h4,
.bg-surface-inverse-alt h5,
.bg-surface-inverse-alt h6,
.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary h6,
.bg-secondary h1,
.bg-secondary h2,
.bg-secondary h3,
.bg-secondary h4,
.bg-secondary h5,
.bg-secondary h6,
.bg-surface-soft h1,
.bg-surface-soft h2,
.bg-surface-soft h3,
.bg-surface-soft h4,
.bg-surface-soft h5,
.bg-surface-soft h6,
.bg-gradient h1,
.bg-gradient h2,
.bg-gradient h3,
.bg-gradient h4,
.bg-gradient h5,
.bg-gradient h6 {
    color: var(--color-heading-inverse);
}

/* Prose body-tekst: parent staat op 450, KooyGrow wil 400 (was net te dik) */
.prose,
.prose :where(p),
.prose :where(li) {
    font-weight: 400;
}