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

/* Sitefont: vervang alleen --site-font-family per project */
@font-face {
    font-family: "Cavren Sans Variable";
    src: url("cavren-sans-variable/cavren-sans-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --site-font-family: "Cavren Sans Variable";
    --font-display: var(--site-font-family), 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 (site-specific; swap these per project) */
    --brand-1: #8dc63f;
    --brand-2: #000000;
    --brand-3: #8dc63f;
    --brand-4: #F5F5ED;
    --brand-5: #A1C9CB;
    --brand-6: #009444;
    --brand-7: #291C29;

    /* Semantic tokens (use these 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: #7A6F73;
    --color-muted-80: #5A5A5A;
    --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: var(--brand-4);
    --color-surface: var(--brand-4);
    --color-surface-alt: var(--brand-3);
    --color-border: #DCD3C6;
    --color-heading-default: var(--brand-7);
    --color-heading-inverse: var(--brand-4);

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

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

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

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

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

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

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

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

.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-6);
}

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

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

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

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);
}