/* ============================================
   TRUEVOICE — THEME
   ============================================
   DIT is het enige bestand dat je aanpast
   als je een ander kleurenschema wil proberen.

   Stap 1: Verander de kleurwaarden hieronder.
   Stap 2: Klaar. Alles wordt automatisch bijgewerkt.
   ============================================ */

:root {

    /* ── DONKERE OPPERVLAKKEN ─────────────────
       Hero achtergrond, navigatie balk (donkere staat).
       Diep aubergine — krachtig, spiritueel, gedurfd.  */
    --color-dark:           #2D1B4E;

    /* ── PRIMAIRE KLEUR ───────────────────────
       Buttons, links, highlights, quote-band.
       Robijn rood — warm, authentiek, menselijk.    */
    --color-primary:        #8B2651;
    --color-primary-hover:  #A02E60;
    --color-primary-light:  #C4658A;
    --color-primary-pale:   #FAF0F4;

    /* ── GOUD ACCENT ──────────────────────────
       Taglines, badges, spirituele touch.
       Oranje goud — warmte, energie, verbinding.    */
    --color-gold:           #D4913A;
    --color-gold-hover:     #E0A045;
    --color-gold-pale:      #FEFBF4;

    /* ── ACHTERGRONDEN ────────────────────────
       Apple-feel: clean white secties met schaduw,
       lichtgrijs banden (#F5F5F7 = Apple's signature). */
    --color-bg:             #FFFFFF;
    --color-bg-warm:        #F5F5F7;

    /* ── RANDEN & DIVIDERS ────────────────────  */
    --color-border:         #E5E5EA;
    --color-border-strong:  #D1D1D6;

    /* ── TEKST ────────────────────────────────
       Warme paarse tinten — leesbaar, niet koud.   */
    --color-text-dark:      #1E1228;
    --color-text-body:      #3A2E42;
    --color-text-muted:     #6B5F78;
    --color-text-subtle:    #9890A4;

    /* ── SUCCES & FOUT (formulieren, meldingen) ─
       Semantische kleuren — bewust niet aanpassen
       tenzij je een specifieke stijlkeuze maakt.   */
    --color-success:        #1b5e20;
    --color-error:          #8b0000;
    --success-rgb:          46, 125, 50;
    --error-rgb:            198, 40, 40;

    /* ── RGB TRIPLETS ─────────────────────────
       Nodig voor rgba() gebruik in schaduwen.
       Aanpassen als je --color-primary wijzigt.     */
    --primary-rgb:          139, 38, 81;
    --dark-rgb:             45, 27, 78;

    /* ── LOGO ─────────────────────────────────
       Logo staat in images/logo11.png (wit, transparante achtergrond).
       Op donkere header: wit — geregeld in styles.css, geen aanpassing nodig.
       Op lichte (gescrolled) header: zwart — ook in styles.css.
       Wil je het logo in de merkkleur op de lichte header?
       → Maak een gekleurde versie van het logo en pas styles.css aan:
         .header--scrolled .logo-img { content: url(images/logo-merkkleur.png); filter: none; } */


    /* ══════════════════════════════════════════
       ALIASES — niet aanpassen
       styles.css gebruikt deze namen intern.
       Ze verwijzen automatisch naar het pallet.
       ══════════════════════════════════════════ */

    /* Donkere oppervlakken */
    --forest-dark:          var(--color-dark);

    /* Primaire kleur (vervangt oud --seal-red / --teal-deep) */
    --teal-deep:            var(--color-primary);
    --teal-mid:             var(--color-primary-hover);
    --teal-light:           var(--color-primary-light);
    --teal-pale:            var(--color-primary-pale);
    --seal-red:             var(--color-primary);
    --seal-red-light:       var(--color-primary-hover);
    --seal-red-dark:        var(--color-primary);

    /* Goud */
    --gold:                 var(--color-gold);
    --gold-light:           var(--color-gold-hover);
    --gold-pale:            var(--color-gold-pale);

    /* Achtergronden */
    --sand-white:           var(--color-bg);
    --sand-light:           var(--color-bg-warm);
    --sand-mid:             var(--color-border);
    --sand-warm:            var(--color-border-strong);
    --washi-white:          var(--color-bg);
    --washi-cream:          var(--color-bg-warm);
    --washi-beige:          var(--color-border);
    --washi-texture:        rgba(250, 248, 244, 0.92);

    /* Tekst */
    --text-deep:            var(--color-text-dark);
    --text-body:            var(--color-text-body);
    --text-muted:           var(--color-text-muted);
    --text-subtle:          var(--color-text-subtle);
    --ink-black:            var(--color-text-dark);
    --ink-gray:             var(--color-text-body);
    --ink-light:            var(--color-text-muted);

    /* Schaduwen & randen */
    --border-subtle:        rgba(var(--primary-rgb), 0.07);
    --border-medium:        rgba(var(--primary-rgb), 0.14);
    --shadow-paper:         0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
    --shadow-card:          0 2px 4px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08);
    --shadow-elevated:      0 4px 8px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.12);

    /* ── TEKST OP DONKERE ACHTERGROND ────────── */
    --text-on-dark:           rgba(255, 255, 255, 0.95);
    --text-on-dark-medium:    rgba(255, 255, 255, 0.82);
    --text-on-dark-secondary: rgba(255, 255, 255, 0.65);
    --text-on-dark-muted:     rgba(255, 255, 255, 0.5);
}