/* website.css — site-specifieke brand-overrides + tokens.
 *
 * Overschrijft framework-defaults uit /modules/variables.css en voegt
 * site-eigen design-tokens toe. Laad NA variables.css.
 *
 * Token-categorieën:
 *  - Brand: --color-primary / --color-accent — site-identiteit.
 *  - On-image: --on-image-* — tekst die bovenop een donkere cover-foto of
 *    overlay rendert (hero, inspiration-tile, postcard, mapplic-overlay,
 *    filling-text). Bewust GEEN light-dark(): de overlay is dark in beide
 *    thema's, dus tekst blijft licht.
 *  - Forms: --form-input-* / --form-radius staan in /css/forms.css; webshop
 *    re-uses die via /css/layer-product-overview.css zodat search-/price-/
 *    contact-form-velden visueel matchen.
 *
 * Voor body-tekst, achtergronden en borders → erf van framework-base:
 *  --color-fg, --color-fg-muted, --color-bg, --color-bg-soft, --color-bg-elev,
 *  --color-border, --color-border-strong (allemaal light-dark()).
 */

:root {
    /* ── Brand ─────────────────────────────────────────────────────────── */
    --color-primary:    #e8a0c0;   /* hoofdkleur — o.a. de navigatie/header-balk */
    --color-primary-fg: #fff;

    /* Afgeleide kleur voor vlakken (panels, soft surfaces). Solide waarde:
       de site staat vast op het lichte schema (zie data-color-scheme="light"). */
    --color-bg-soft:    #fdf6f9;

    /* ── Border-bump in dark-mode ─────────────────────────────────────────
       Framework-default 12%/22% is in dark net té subtiel voor form-inputs
       en FAQ-items; bump naar 20%/32% (light blijft op 12%/22%). Houdt
       de relatieve verhouding (normaal/strong) consistent. */
    --color-border:        light-dark(rgba(0,0,0,.12), rgba(255,255,255,.20));
    --color-border-strong: light-dark(rgba(0,0,0,.22), rgba(255,255,255,.32));

    /* Attentiekleur — voor CTA's/primary-knoppen en [woord]-markup (mark)/
       kleine highlights. Iets dieper dan de hoofdkleur zodat knoppen opvallen
       (ook op de roze header-balk). */
    --color-accent:     #c97aab;

    /* ── On-image: tekst op donkere cover-foto/overlay ─────────────────── */
    --on-image-overlay:        rgba(0, 0, 0, .35);
    --on-image-overlay-strong: rgba(0, 0, 0, .5);
    --on-image-fg:             #fff;
    --on-image-fg-soft:        rgba(255, 255, 255, .85);
    --on-image-border:         rgba(255, 255, 255, .6);
    --on-image-bg-hover:       rgba(255, 255, 255, .12);
}