/*
Theme Name: Trouwmuziek
Theme URI: https://trouwmuziek.be
Description: Custom theme for Trouwmuziek
Version: 2.2.0
Author: Joeri
Author URI: https://trouwmuziek.be
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trouwmuziek
Domain Path: /languages
*/

/* Lichte, feestelijke look "Champagne-feest" (2026-10-25; vervangt richting B "Avond" van dezelfde dag).
   Ontwerpspecificatie: claude/ontwerp/2026-10-25-feestelijk/ontwerpspecificatie-licht-2026-10-25.md § 2.
   Dit bestand bevat alleen de tokens en de basis; het laadt als eerste (functions.php),
   daarna fonts.css, main.css en contact.css. Geen @import: dat zou een tweede download geven. */

:root {
    /* Kleuren (ontwerpspecificatie § 2); de hele site is licht */
    --ivoor:  #fbf7f1;   /* basis (body), lange leestekst */
    --wit:    #ffffff;   /* kaarten, prijskaartjes, nav, formuliervelden */
    --blush:  #fdeeee;   /* roze vlakken: momentenkaarten, slot, voet */
    --blush2: #f3d9db;   /* lijnen en cirkels op blush */
    --inkt:   #241f21;   /* tekst */
    --inkt2:  #6d6366;   /* gedempte tekst */
    --lijn:   #ece2dc;   /* lijnen op ivoor en wit */
    --rood:   #C41E3A;   /* knoppen, accentwoorden, Faute Bendt-blok, script (merkkleur) */
    --rood-l: #ffd9de;   /* accent op rood of op foto */
    --nacht:  #241f21;   /* alleen nog voor de hero-overlay */

    /* Maten */
    --kolom: 720px;      /* leeskolom */
    --breed: 1180px;     /* raster */
    --marge: 24px;       /* zijmarge */

    /* Letters */
    --letter-kop:   'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif;
    --letter-brood: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --letter-script: 'Pinyon Script', 'Snell Roundhand', cursive;

    /* Rondingen (specificatie § 4) */
    --rond-hero:  40px;
    --rond-blok:  32px;
    --rond-kaart: 24px;
    --rond-klein: 20px;

    /* Betekenis per vlak: licht is de standaard; het rode Faute Bendt-blok zet ze om (main.css) */
    --tekst:     var(--inkt);
    --tekst2:    var(--inkt2);
    --lijnkleur: var(--lijn);
    --vlak:      var(--ivoor);
    --accent:    var(--rood);

}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 88px;
}

body {
    font-family: var(--letter-brood);
    font-size: 17px;
    line-height: 1.6;
    color: var(--tekst);
    background: var(--ivoor);
    overflow-x: hidden;
}

img,
picture,
svg,
iframe {
    max-width: 100%;
    display: block;
}

.container {
    max-width: calc(var(--breed) + 2 * var(--marge));
    margin: 0 auto;
    padding: 0 var(--marge);
}

a {
    color: inherit;
    text-decoration-color: var(--accent);
    text-underline-offset: 3px;
}

a:hover {
    color: var(--accent);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}