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

/*
 * Projectkleuren en section-tokens voor Presec.
 *
 * Fonts zijn gedefinieerd in het parent theme:
 *   tailwind/custom/fonts.css  → @font-face
 *   tailwind/tailwind-theme.css → --font-display / --font-sans
 *
 * Prose en heading-kleurlogica worden door de parent (base.css) geconsumeerd
 * via de --section-* tokens die hier per achtergrondklasse worden gezet.
 */

:root {
    /* Brand palette */
    --brand-light: #FFFDFA;
    --brand-red: #C63A28;
    --brand-green: #24c945;
    --brand-black: #121212;
    --brand-white: #FFFFFF;

    /* Projectkleuren */
    --color-primary: var(--brand-red);
    --color-accent-green: var(--brand-green);
    --color-secondary: var(--brand-black);

    /* Basiskleuren voor algemene UI en borders */
    --color-foreground: var(--brand-black);
    --color-muted: #5a5a5a;
    --color-background: #FFFDFA;
    --color-surface: #FFFDFA;
    --color-border: rgba(0, 0, 0, 0.14);
    --color-heading-default: #121212;
    --color-heading-inverse: #FFF;

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

    /* Tekstkoppels per context */
    --text-surface-heading: #121212;
    --text-surface: #5a5a5a;
    --text-surface-invert-heading: #FFF;
    --text-surface-invert: rgba(245, 242, 235, 0.76);
    --text-on-image-heading: #FFF;
    --text-on-image: rgba(255, 250, 246, 0.88);

    /* Standaard section-tokens (lichte achtergrond als default) */
    --section-bg: var(--color-surface);
    --section-fg: var(--text-surface);
    --section-heading: var(--text-surface-heading);
    --section-muted: var(--text-surface);
    --section-border: var(--color-border);
    --section-border-strong: rgba(0, 0, 0, 0.24);
    --section-link: var(--color-primary);
    --section-eyebrow: var(--color-secondary);
    --section-eyebrow-accent: var(--color-secondary);
}

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

.bg-surface {
    --section-bg: var(--color-surface);
    --section-fg: var(--text-surface);
    --section-heading: var(--text-surface-heading);
    --section-muted: var(--text-surface);
    --section-border: var(--color-border);
    --section-border-strong: rgba(0, 0, 0, 0.24);
    --section-link: var(--color-primary);
    --section-eyebrow: var(--color-secondary);
    --section-eyebrow-accent: var(--color-secondary);
    background-color: var(--section-bg);
    color: var(--section-fg);
}

.bg-primary {
    --section-bg: var(--color-primary);
    --section-fg: var(--text-surface-invert);
    --section-heading: var(--text-surface-invert-heading);
    --section-muted: var(--text-surface-invert);
    --section-border: rgba(255, 255, 255, 0.2);
    --section-border-strong: rgba(255, 255, 255, 0.45);
    --section-link: var(--text-surface-invert-heading);
    --section-eyebrow: var(--text-surface-invert);
    --section-eyebrow-accent: var(--brand-white);
    background-color: var(--section-bg);
    color: var(--section-fg);
}

.bg-accent-green {
    background-color: var(--color-accent-green);
    color: var(--brand-white);
}

.bg-surface-inverse {
    --section-bg: var(--color-secondary);
    --section-fg: var(--text-surface-invert);
    --section-heading: var(--text-surface-invert-heading);
    --section-muted: var(--text-surface-invert);
    --section-border: rgba(255, 255, 255, 0.2);
    --section-border-strong: rgba(255, 255, 255, 0.45);
    --section-link: var(--text-surface-invert-heading);
    --section-eyebrow: var(--color-primary);
    --section-eyebrow-accent: var(--color-primary);
    background-color: var(--section-bg);
    color: var(--section-fg);
}

.bg-image {
    --section-fg: var(--text-on-image);
    --section-heading: var(--text-on-image-heading);
    --section-muted: rgba(255, 250, 246, 0.76);
    --section-link: var(--text-on-image-heading);
    --section-eyebrow: var(--text-on-image);
    --section-eyebrow-accent: var(--brand-white);
    color: var(--section-fg);
}

/* Buttons: override section-fg color inheritance on bg-* elements */
.btn.bg-primary,
.btn.bg-surface-inverse {
    color: white;
}

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

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

.fill-accent-green {
    fill: var(--color-accent-green);
}

/* Project-specifiek: swiper progress kleur per achtergrond */
.projects-progress {
    background-color: rgba(198, 58, 40, 0.2);
}

.bg-primary .projects-progress,
.bg-surface-inverse .projects-progress {
    background-color: rgba(255, 255, 255, 0.2);
}

.bg-primary .projects-progress .swiper-pagination-progressbar-fill {
    background-color: var(--color-surface);
}