/* website.css — banuslodge.com brand-tokens (stijlgids Age, 2026-06).
 *
 * Overschrijft framework-defaults uit /modules/variables.css en voegt
 * site-eigen design-tokens toe. Laad NA variables.css.
 *
 * Stijlgids-palet: cream #F4EFEB · terra #9F643F · olive #8E8866 ·
 * olive-dark #5A5537 · brown #573B2D · sand #E1CC95 · ink #1D1D1B.
 * Dit bestand is de ENIGE plek met hex-waarden; site.css gebruikt
 * uitsluitend tokens (zie ook de CMS-theme-vars --theme-color-1..10).
 */

:root {
    /* ── Brand ─────────────────────────────────────────────────────────── */
    --color-primary:    #9f643f;   /* terra — knoppen, nav-accent, links */
    --color-primary-fg: #f4efeb;   /* cream op terra */
    --color-accent:     #9f643f;

    /* ── Vlakken — site staat vast op het lichte schema ────────────────── */
    --color-bg:         #f4efeb;   /* cream als paginabasis */
    --color-bg-soft:    #ede4dc;   /* dieper cream voor panels */
    --color-bg-elev:    #ffffff;   /* kaarten/pill-nav */
    --color-fg:         #1d1d1b;   /* ink */

    /* ── Site-eigen tokens (gebruikt door custom/site.css) ─────────────── */
    --bl-olive:      #8e8866;
    --bl-olive-dark: #5a5537;
    --bl-brown:      #573b2d;
    --bl-sand:       #e1cc95;
    --bl-radius:      18px;  /* één kaart-radius site-breed (galerij/kaarten/frosted) */
    --bl-band-radius: 34px;  /* grote banden/kaarten (terra-band, locatie, contact-info) */

    /* Content-breedte — design --max; overschrijft framework-default (76rem) */
    --content-max:   1240px;

    /* ── Tekst-tinten (design) ─────────────────────────────────────────── */
    --bl-body-text:  #5d534b;   /* paragrafen in lagen op licht */
    --bl-welcome:    #473d35;   /* welkom-sectie-tekst (warmer dan body) */
    --bl-signature:  #6f6359;   /* ondertekening (italic) */
    --bl-near-white: #fcfaf9;   /* basis van het welkom-verloop */
    /* cream met alpha — tekst op donkere banden (color-mix valt buiten de
       browser-baseline, daarom rgba) */
    --bl-cream-soft:    rgba(244, 239, 235, .7);   /* eyebrow op donker */
    --bl-cream-soft-72: rgba(244, 239, 235, .72);  /* lopende tekst op band */
    --bl-cream-90:      rgba(244, 239, 235, .9);   /* kaart-subtekst op foto */
    --bl-cream:         #f4efeb;                    /* hero-dot actief (pill) */
    --bl-cream-55:      rgba(244, 239, 235, .55);   /* hero-dot inactief */
    /* paginavoet (design .footer-*): cream-tinten op het bruine vlak */
    --bl-cream-soft-82: rgba(244, 239, 235, .82);   /* footer body/links */
    --bl-cream-soft-60: rgba(244, 239, 235, .6);    /* footer onderbalk */
    --bl-cream-12:      rgba(244, 239, 235, .12);   /* social-knop vlak */
    --bl-cream-25:      rgba(244, 239, 235, .25);   /* social-knop hover */
    --bl-cream-14:      rgba(244, 239, 235, .14);   /* footer-scheidingslijn */
    /* frosted-glass kaartjes op foto-banden (design .loc-card) */
    --bl-frost:         rgba(46, 52, 64, .24);
    --bl-frost-hover:   rgba(46, 52, 64, .32);
    --bl-frost-border:  rgba(255, 255, 255, .22);
    /* brand-getinte schaduwen (alpha-variant van brown; bewust rgba —
       color-mix valt buiten de browser-baseline) */
    --bl-shadow:     0 18px 50px rgba(87, 59, 45, .14);
    --bl-shadow-sm:  0 8px 24px rgba(87, 59, 45, .10);
    /* omhoog-werpende schaduw voor de sticky book-bar (rand naar boven) */
    --bl-shadow-up:  0 -10px 34px rgba(87, 59, 45, .12);

    /* ── On-image: tekst op donkere cover-foto/overlay ─────────────────── */
    --on-image-overlay:        rgba(29, 29, 27, .35);
    --on-image-overlay-strong: rgba(29, 29, 27, .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);
}