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

/* Sitefont: vervang alleen --site-font-family per project */
@font-face {
    font-family: "Manrope";
    src: url("manrope/Manrope-VariableFont_wght.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

:root {
    --site-font-family: "Manrope";
    --font-display: "Manrope", sans-serif;
    --font-sans: "Manrope", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    /* Brand palette (site-specific; swap deze per project) */
    --brand-1: #FDA300;
    --brand-2: #08213D;

    /* 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;
    /* Prose-tekst op lichte achtergronden: getinte shade van brand-2 i.p.v. vlak grijs */
    --color-prose-fg: color-mix(in srgb, var(--brand-2) 62%, transparent);
    --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);
    /* Shades: neutrale, lichte kaart/pill-achtergronden afgeleid van brand-2 */
    --color-shade-1: color-mix(in srgb, var(--brand-2) 12%, white);
    --color-shade-2: color-mix(in srgb, var(--brand-2) 28%, white);
    --color-border: #C8DCE0;
    --color-heading-default: var(--color-foreground);
    --color-heading-inverse: var(--color-surface);

    /* Vaste tint (niet afgeleid — moet pixel-exact matchen met transparante
       PNG's, zie team-item.php) */
    --color-tinted-card: #f0ece2;
    --color-primary-shade: color-mix(in srgb, var(--brand-1) 90%, black);
    --color-secondary-shade: color-mix(in srgb, var(--brand-2) 90%, black);

    /* Extra brand-accentkleuren, vooralsnog alleen gebruikt voor random
       kaart-tint op team-item.php — geen ACF-koppeling, niet gebruiken in
       buttons/secties. */
    --brand-green: #88C40E;
    --brand-blue: #3DA9DE;
    --brand-pink: #FC5C87;

    --brand-orange-tint: color-mix(in srgb, var(--brand-1) 32%, white);
    --brand-green-tint: color-mix(in srgb, var(--brand-green) 32%, white);
    --brand-blue-tint: color-mix(in srgb, var(--brand-blue) 32%, white);
    --brand-pink-tint: color-mix(in srgb, var(--brand-pink) 32%, white);

    /* Backward-compat aliases */
    --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-tinted-card);
    --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-tinted-card);
    --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-tinted-card);
    --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-tinted-card);
    --section-card-fg: var(--color-foreground);
    background-color: var(--color-shade-1);
    color: var(--section-fg);
}

.bg-shade-2 {
    --section-bg: var(--color-shade-2);
    --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-tinted-card);
    --section-card-fg: var(--color-foreground);
    background-color: var(--color-shade-2);
    color: var(--section-fg);
}

.bg-primary {
    --section-bg: var(--brand-1);
    --section-fg: rgba(255, 255, 255, 0.92);
    --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);
}

/* bg-secondary alias (gebruikt hardcoded in hero.php) */
.bg-secondary {
    --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;
}

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

.fill-shade-1 { fill: var(--color-shade-1); }
.stroke-shade-1 { stroke: var(--color-shade-1); }

.fill-shade-2 { fill: var(--color-shade-2); }
.stroke-shade-2 { stroke: var(--color-shade-2); }

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

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

/* 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;
}

/* Prose links op bg-surface-inverse: zelfde behandeling als de footer-widgets
   (die ook op bg-surface-inverse staan) — inherit + subtiele hover naar primary. */
.bg-surface-inverse .prose a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.bg-surface-inverse .prose a:hover,
.bg-surface-inverse .prose a:focus-visible {
    color: var(--color-primary);
    text-decoration: none;
}