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

:root {
    --font-display: "din-condensed", sans-serif;
    --font-sans: din-2014, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    /* ============================================================
       Brand palette — swap per project
       brand-1  Primair (HaVL oranje)
       brand-2  Accent (HaVL licht oranje)
       brand-3  Lichte tint (HaVL lichter oranje — surface-alt)
       brand-4  Wit/achtergrond
       brand-5  Zacht blauw (HaVL licht blauw — surface-soft)
       brand-6  Aqua (HaVL aqua — inverse secties, navigatie)
       brand-7  Donkerste (HaVL donker blauw — tekst, headings)
       ============================================================ */
    --brand-1: #EB5C1D;   /* HaVL oranje */
    --brand-2: #F7B27E;   /* HaVL licht oranje */
    --brand-3: #FFEBD1;   /* HaVL lichter oranje (surface-alt tint) */
    --brand-4: #F5EFE8;   /* wit */
    --brand-5: #95C0C0;   /* HaVL licht blauw (surface-soft) */
    --brand-6: #006469;   /* HaVL aqua (inverse secties) */
    --brand-7: #071923;   /* HaVL donker blauw (tekst, deepest bg) */

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

    --color-foreground: var(--brand-7);
    --color-muted: #7A8A8A;
    --color-muted-80: #576363;
    --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-background: var(--brand-4);
    --color-surface: var(--brand-4);
    --color-surface-alt: var(--brand-3);
    --color-border: #C5D5D5;
    --color-heading-default: var(--brand-7);
    --color-heading-inverse: var(--brand-4);

    /* Kaartkleuren voor blocks.php (--section-card-bg/-fg): per sectie hieronder
       een echte afgeleide tint van de eigen sectie-achtergrond (color-mix met
       --color-foreground), niet een losstaand brand-kleurtje — anders is het
       geen "tint van de achtergrond" maar gewoon een 2e brand-kleur ernaast. */
    --color-primary-shade: color-mix(in srgb, var(--brand-1) 90%, black);
    /* Let op: dit is een tint van brand-7 (de daadwerkelijke bg-surface-inverse
       kleur), NIET van brand-6 (secondary/aqua) — anders krijg je 2 losse
       merkkleuren door elkaar i.p.v. een echte tint van de sectie-achtergrond.
       brand-7 is zelf al zeer donker, dus hier mixen we met wit (lichter),
       niet met zwart, zodat de kaart zichtbaar afsteekt tegen de sectie. */
    --color-inverse-shade: color-mix(in srgb, var(--brand-7) 85%, white 15%);

    /* Backward-compat aliases */
    --color-dark: var(--brand-7);

    /* 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-muted-80);
    --section-heading: var(--brand-7);
    --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(--brand-7);
    --section-eyebrow-accent: var(--brand-1);
    --section-card-bg: color-mix(in srgb, var(--brand-4) 85%, var(--color-foreground) 15%);
    --section-card-fg: var(--color-foreground);
}

/* Eyebrow dot */
.eyebrow::before {
    content: '';
    display: block;
    width: 0.6rem;
    border-radius: 50%;
    height: 0.6rem;
    flex-shrink: 0;
    position: relative;
    top: -1px;
}

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

.bg-surface {
    --section-bg: var(--color-surface);
    --section-fg: var(--color-muted-80);
    --section-heading: var(--brand-7);
    --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(--brand-7);
    --section-eyebrow-accent: var(--brand-1);
    --section-card-bg: color-mix(in srgb, var(--brand-4) 85%, var(--color-foreground) 15%);
    --section-card-fg: var(--color-foreground);
    background-color: var(--brand-4);
    color: var(--section-fg);
}

.bg-surface-alt {
    --section-bg: var(--brand-3);
    --section-fg: var(--color-muted-80);
    --section-heading: var(--brand-7);
    --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(--brand-7);
    --section-eyebrow-accent: var(--brand-1);
    --section-card-bg: color-mix(in srgb, var(--brand-3) 85%, var(--color-foreground) 15%);
    --section-card-fg: var(--color-foreground);
    background-color: var(--brand-3);
    color: var(--section-fg);
}

/* bg-brand-2: HaVL licht oranje — lichte achtergrond, donkere tekst */
.bg-brand-2 {
    --section-bg: var(--brand-2);
    --section-fg: var(--color-muted-80);
    --section-heading: var(--brand-7);
    --section-muted: var(--color-muted-80);
    --section-border: rgba(0, 0, 0, 0.12);
    --section-border-strong: rgba(0, 0, 0, 0.25);
    --section-link: var(--brand-6);
    --section-eyebrow: var(--brand-7);
    --section-eyebrow-accent: var(--brand-6);
    --section-card-bg: color-mix(in srgb, var(--brand-2) 85%, var(--color-foreground) 15%);
    --section-card-fg: var(--color-foreground);
    background-color: var(--brand-2);
    color: var(--section-fg);
}

/* bg-surface-soft: HaVL licht blauw — lichte achtergrond, donkere tekst */
.bg-surface-soft {
    --section-bg: var(--brand-5);
    --section-fg: var(--color-muted-80);
    --section-heading: var(--brand-7);
    --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(--brand-7);
    --section-eyebrow-accent: var(--brand-1);
    --section-card-bg: color-mix(in srgb, var(--brand-5) 85%, var(--color-foreground) 15%);
    --section-card-fg: var(--color-foreground);
    background-color: var(--brand-5);
    color: var(--section-fg);
}

/* bg-primary: HaVL oranje — donkere sectie, witte tekst */
.bg-primary {
    --section-bg: var(--brand-1);
    --section-fg: rgba(255, 255, 255, 0.88);
    --section-heading: #ffffff;
    --section-muted: rgba(255, 255, 255, 0.70);
    --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.75);
    --section-eyebrow-accent: var(--brand-4);
    --section-card-bg: var(--color-primary-shade);
    --section-card-fg: #ffffff;
    background-color: var(--brand-1);
    color: var(--section-fg);
}

/* bg-surface-inverse: HaVL donker blauw — donkere sectie, witte tekst */
.bg-surface-inverse {
    --section-bg: var(--brand-7);
    --section-fg: rgba(255, 255, 255, 0.82);
    --section-heading: var(--brand-4);
    --section-muted: rgba(255, 255, 255, 0.62);
    --section-border: rgba(255, 255, 255, 0.18);
    --section-border-strong: rgba(255, 255, 255, 0.38);
    --section-link: var(--brand-4);
    --section-eyebrow: rgba(255, 255, 255, 0.70);
    --section-eyebrow-accent: var(--brand-2);
    --section-card-bg: var(--color-inverse-shade);
    --section-card-fg: #ffffff;
    background-color: var(--brand-7);
    color: var(--section-fg);
}

/* bg-surface-inverse-alt: zelfde donker blauw, apart instelbaar */
.bg-surface-inverse-alt {
    --section-bg: var(--brand-7);
    --section-fg: rgba(255, 255, 255, 0.82);
    --section-heading: var(--brand-4);
    --section-muted: rgba(255, 255, 255, 0.62);
    --section-border: rgba(255, 255, 255, 0.18);
    --section-border-strong: rgba(255, 255, 255, 0.38);
    --section-link: var(--brand-4);
    --section-eyebrow: rgba(255, 255, 255, 0.70);
    --section-eyebrow-accent: var(--brand-2);
    --section-card-bg: var(--color-inverse-shade);
    --section-card-fg: #ffffff;
    background-color: var(--brand-7);
    color: var(--section-fg);
}

/* bg-dark alias — gelijk aan bg-surface-inverse (donker blauw) */
.bg-dark {
    --section-bg: var(--brand-7);
    --section-fg: rgba(255, 255, 255, 0.82);
    --section-heading: var(--brand-4);
    --section-muted: rgba(255, 255, 255, 0.62);
    --section-border: rgba(255, 255, 255, 0.18);
    --section-border-strong: rgba(255, 255, 255, 0.38);
    --section-link: var(--brand-4);
    --section-eyebrow: rgba(255, 255, 255, 0.70);
    --section-eyebrow-accent: var(--brand-2);
    --section-card-bg: var(--color-inverse-shade);
    --section-card-fg: #ffffff;
    background-color: var(--brand-7);
    color: var(--section-fg);
}

/* bg-secondary alias (gebruikt hardcoded in hero.php) */
.bg-secondary {
    --section-bg: var(--brand-7);
    --section-fg: rgba(255, 255, 255, 0.82);
    --section-heading: var(--brand-4);
    --section-muted: rgba(255, 255, 255, 0.62);
    --section-border: rgba(255, 255, 255, 0.18);
    --section-border-strong: rgba(255, 255, 255, 0.38);
    --section-link: var(--brand-4);
    --section-eyebrow: rgba(255, 255, 255, 0.70);
    --section-eyebrow-accent: var(--brand-2);
    --section-card-bg: var(--color-inverse-shade);
    --section-card-fg: #ffffff;
}

/* SVG fill utilities */
.fill-surface { fill: var(--brand-4); }
.stroke-surface { stroke: var(--brand-4); }

.fill-surface-alt { fill: var(--brand-3); }
.stroke-surface-alt { stroke: var(--brand-3); }

.fill-surface-soft { fill: var(--brand-5); }
.stroke-surface-soft { stroke: var(--brand-5); }

.fill-surface-inverse { fill: var(--brand-7); }
.stroke-surface-inverse { stroke: var(--brand-7); }

.fill-surface-inverse-alt { fill: var(--brand-7); }
.stroke-surface-inverse-alt { stroke: var(--brand-7); }

/* Prose links op bg-primary: zelfde kleur als bg, dus inherit + underline */
.bg-primary .prose a {
    color: inherit;
    text-decoration-line: underline;
    text-underline-offset: 3px;
}