/* ============================================================
   brand.css — DE ENIGE BRON VAN WAARHEID VOOR HET MERK-DESIGN.

   Pas hier per klant de kleuren, fonts, knop- en formulierstijlen aan.
   ZOWEL de frontend (via main.css) ALS de CMS-admin laden dit bestand,
   zodat de CMS automatisch exact dezelfde uitstraling krijgt als de
   website. Eén plek wijzigen = frontend én CMS volgen.

   Wijzig je het lettertype? Pas dan ook de Google-Fonts <link> aan in
   de HTML-templates (frontend) én in cms/public/*.html (CMS).
   ============================================================ */

:root {
    /* ── Merkkleuren: Feestlocatie Alegria ──
       Zoals op de oude site: alles in goud op donkergroen, ook de lopende
       tekst. De contactkaart is het donkerste vlak, het formulier ernaast
       iets lichter. */
    --brand:       #c2a671;   /* goud: tekst, knoppen, lijnen */
    --brand-dark:  #a88848;   /* donkerder goud */
    --accent:      #d4bb8a;   /* lichter goud (hover van gevulde knoppen) */
    --ink:         #c2a671;   /* koppen */
    --body:        #c2a671;   /* lopende tekst */
    --muted:       #96855e;   /* goud op 70% over --bg, als vaste kleur zoals in theme_tokens */
    --line:        rgba(194, 166, 113, .35);
    --bg:          #2e3732;   /* donkergroen: de pagina */
    --bg-soft:     #1b221e;   /* formulier, megamenu, menu op de telefoon */
    --bg-dark:     #101814;   /* contactkaart, datumkiezer */
    --ster:        #ffc107;   /* de sterren van Google */

    /* ── Vorm ── */
    --radius: 0;
    --shadow: 0 20px 44px rgba(0, 0, 0, .4);

    /* ── Typografie ── */
    --font-head: 'Abhaya Libre', Georgia, 'Times New Roman', serif;
    --font-body: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    /* ── Maten van de site (gemeten op de oude site) ── */
    --breedte:   1100px;      /* inhoud */
    --rand:      20px;        /* binnenrand van secties en blokken */
    --ruimte-mobiel: 60px;    /* boven en onder elke sectie op de telefoon */
    --duur:      .3s;
    --curve:     cubic-bezier(.22, .61, .36, 1);
}

/* ── Basis-typografie (gedeeld) ── */
body { font-family: var(--font-body); color: var(--body); line-height: 1.65; }
h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--ink); line-height: 1.15; font-weight: 800; }
a { color: var(--brand); }

/* ── Knoppen (gedeeld door frontend + CMS) ── */
.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-head); font-weight: 700; font-size: 1rem;
    text-decoration: none; padding: .85rem 1.6rem;
    border-radius: 999px; border: 2px solid transparent;
    cursor: pointer; transition: transform .15s, background .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-light { background: #fff; color: var(--brand); }

/* ── Formuliervelden (gedeeld) ── */
input, textarea, select {
    font-family: var(--font-body); font-size: 1rem;
    padding: .7rem .85rem; border: 1px solid var(--line);
    border-radius: 8px; background: #fff; color: var(--ink);
}
input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}