/*
 Theme Name: Stuwit Core Child
 Template: stuwit-core/theme
 Description: Child-thema voor s.v. "de Valleivogels" — merkkleuren, fonts en sectie-tones.
*/

/* General Sans: variabele font met wght-as (200–700), incl. losse italic-face
   (Fontshare's variable italic zit niet op dezelfde as, dus een aparte @font-face
   met font-style: italic). Dit is de --font-sans hieronder. */
@font-face {
    font-family: "General Sans";
    src: url("general-sans/GeneralSans-Variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
}

@font-face {
    font-family: "General Sans";
    src: url("general-sans/GeneralSans-VariableItalic.woff2") format("woff2");
    font-style: italic;
    font-weight: 200 700;
    font-display: swap;
}

/* Thunder: variabele font met wght-as (100–900) — font-family-naam moet
   exact "Thunder" zijn, dat is de waarde van --font-display hieronder. */
@font-face {
    font-family: "Thunder";
    src: url("thunder/Thunder-VF.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --font-display: "Thunder", sans-serif;
    --font-sans: "General Sans", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    /* Merkkleuren Valleivogels: rood + (bijna) zwart */
    --brand-1: #D21A38;
    --brand-2: #101010;

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

    --color-foreground: color-mix(in srgb, var(--brand-2) 96%, black);
    --color-muted: #7A6F73;
    --color-muted-80: #5A5A5A;
    /* Lopende tekst: vol donker (was 62% dekking — te licht). */
    --color-prose-fg: var(--color-foreground);
    --color-prose-body: var(--color-prose-fg);
    --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-surface: #ffffff;

    /* Alle tones hieronder zijn afgeleid van de 2 brand colors (brand-1/brand-2)
       via color-mix() — pas het percentage aan om de tint bij te sturen. */
    --color-background: color-mix(in srgb, var(--brand-1) 6%, white);
    --color-background-tinted: var(--color-background);
    /* Shade: neutrale, lichte kaart/pill-achtergrond afgeleid van brand-2 (bg-shade-1) */
    --color-shade-1: color-mix(in srgb, var(--brand-2) 12%, white);
    --color-border: #C8DCE0;
    --color-heading-default: var(--color-foreground);

    /* Lichte kaart-achtergrond (--section-card-bg op de lichte tones), afgeleid van brand-2 */
    --color-card-light: color-mix(in srgb, var(--brand-2) 8%, white);
    --color-primary-shade: color-mix(in srgb, var(--brand-1) 90%, black);
    --color-secondary-shade: color-mix(in srgb, var(--brand-2) 90%, black);

    /* Alias: text-dark/border-dark/bg-dark in de templates */
    --color-dark: var(--color-secondary);

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

    /* Standaard section-tokens (lichte achtergrond als default) */
    --section-bg: var(--color-surface);
    --section-fg: var(--color-prose-fg);
    --section-heading: var(--color-foreground);
    --section-muted: var(--color-muted-80);
    --section-border: rgba(0, 0, 0, 0.10);
    --section-border-strong: rgba(0, 0, 0, 0.22);
    --section-link: var(--color-primary);
    --section-eyebrow: var(--color-foreground);
    --section-eyebrow-accent: var(--brand-1);
    --section-card-bg: var(--color-card-light);
    --section-card-fg: var(--color-foreground);
}

/* ============================================================
   Section-tokens per achtergrondklasse
   De parent (base.css) consumeert deze tokens voor headings,
   eyebrow en prose. Utilities.css consumeert ze voor prose vars.
   ============================================================ */

.bg-background {
    --section-bg: var(--color-background-tinted);
    --section-fg: var(--color-prose-fg);
    --section-heading: var(--color-foreground);
    --section-muted: var(--color-muted-80);
    --section-border: rgba(0, 0, 0, 0.10);
    --section-border-strong: rgba(0, 0, 0, 0.22);
    --section-link: var(--color-primary);
    --section-eyebrow: var(--color-foreground);
    --section-eyebrow-accent: var(--brand-1);
    --section-card-bg: var(--color-card-light);
    --section-card-fg: var(--color-foreground);
    background-color: var(--color-background-tinted);
    color: var(--section-fg);
}

.bg-surface {
    --section-bg: var(--color-surface);
    --section-fg: var(--color-prose-fg);
    --section-heading: var(--color-foreground);
    --section-muted: var(--color-muted-80);
    --section-border: rgba(0, 0, 0, 0.10);
    --section-border-strong: rgba(0, 0, 0, 0.22);
    --section-link: var(--color-primary);
    --section-eyebrow: var(--color-foreground);
    --section-eyebrow-accent: var(--brand-1);
    --section-card-bg: var(--color-card-light);
    --section-card-fg: var(--color-foreground);
    background-color: var(--color-surface);
    color: var(--section-fg);
}

.bg-shade-1 {
    --section-bg: var(--color-shade-1);
    --section-fg: var(--color-prose-fg);
    --section-heading: var(--color-foreground);
    --section-muted: var(--color-muted-80);
    --section-border: rgba(0, 0, 0, 0.10);
    --section-border-strong: rgba(0, 0, 0, 0.22);
    --section-link: var(--color-primary);
    --section-eyebrow: var(--color-foreground);
    --section-eyebrow-accent: var(--brand-1);
    --section-card-bg: var(--color-card-light);
    --section-card-fg: var(--color-foreground);
    background-color: var(--color-shade-1);
    color: var(--section-fg);
}

.bg-neutral-100 {
    /* Kaarten (agenda-items e.d.) wit, anders vallen ze weg tegen neutral-100. */
    --section-card-bg: #ffffff;
}

.bg-primary {
    --section-bg: var(--brand-1);
    /* Bewust vol wit i.p.v. de rgba-tint die de andere donkere tones gebruiken (bv.
       bg-surface-inverse) — op het rode bg-primary oogt die tint minder mooi/net iets
       gedimd, puur #fff leest daar beter. */
    --section-fg: #ffffff;
    --section-heading: #ffffff;
    --section-muted: rgba(255, 255, 255, 0.65);
    --section-border: rgba(255, 255, 255, 0.20);
    --section-border-strong: rgba(255, 255, 255, 0.45);
    --section-link: #ffffff;
    --section-eyebrow: rgba(255, 255, 255, 0.70);
    --section-eyebrow-accent: var(--color-surface);
    --section-card-bg: var(--color-primary-shade);
    --section-card-fg: #ffffff;
    background-color: var(--brand-1);
    color: var(--section-fg);
}

.bg-surface-inverse {
    --section-bg: var(--brand-2);
    --section-fg: rgba(255, 255, 255, 0.90);
    --section-heading: var(--color-surface);
    --section-muted: rgba(255, 255, 255, 0.60);
    --section-border: rgba(255, 255, 255, 0.18);
    --section-border-strong: rgba(255, 255, 255, 0.40);
    --section-link: var(--color-surface);
    --section-eyebrow: rgba(255, 255, 255, 0.70);
    --section-eyebrow-accent: var(--color-shade-1);
    --section-card-bg: var(--color-secondary-shade);
    --section-card-fg: #ffffff;
    background-color: var(--brand-2);
    color: var(--section-fg);
}

.bg-surface-inverse-alt {
    --section-bg: var(--color-foreground);
    --section-fg: rgba(255, 255, 255, 0.90);
    --section-heading: var(--color-surface);
    --section-muted: rgba(255, 255, 255, 0.60);
    --section-border: rgba(255, 255, 255, 0.18);
    --section-border-strong: rgba(255, 255, 255, 0.40);
    --section-link: var(--color-surface);
    --section-eyebrow: rgba(255, 255, 255, 0.70);
    --section-eyebrow-accent: var(--color-shade-1);
    --section-card-bg: var(--color-secondary-shade);
    --section-card-fg: #ffffff;
    background-color: var(--color-foreground);
    color: var(--section-fg);
}

/* SVG fill utility (decor_fill_class in stuwit_core_section_tones()) */
.fill-surface { fill: var(--color-surface); }

/* Tekstlinks (alle tones): .prose a:not([class]) in stuwit-core tailwind/custom/utilities.css. */