/* ============================================================================
   CENTRAAL THEMA — Standing Ovation
   ----------------------------------------------------------------------------
   Alle kleuren en gradiënten van de hele website staan HIER, op één plek.
   Pas een waarde aan, sla op en ververs — geen build nodig, geen CSS zoeken.

   → Kleur wijzigen?     pas de hex-waarde aan bij "Basiskleuren".
   → Gradiënt wijzigen?  pas de kleurstops in de linear-/radial-gradient(...) aan.

   De rest van de site (style.css en alle pagina's) verwijst uitsluitend via
   var(--naam) naar deze waarden.

   PALET — "Marine Blue" (aangeleverd door de klant)
       #CCDBDC   ijsblauw       #9AD1D4   zacht aqua     #80CED7   aqua
       #007EA7   marineblauw    #003249   diep navy
   Plus de cyaan uit het logo: #009EE3
   ============================================================================ */

:root {

    /* ---- Basiskleuren ---- */
    --acc:         #00648A;   /* Hoofdaccent (marineblauw) — knoppen, links, kickers.
                                 Dieper dan de #007EA7 uit het palet, zodat kleine
                                 tekst óók op --tint 4.5:1 haalt (WCAG AA).      */
    --acc-deep:    #004D6B;   /* Donkerdere hover-variant van het hoofdaccent   */
    --acc-bright:  #007EA7;   /* De palet-blauw zelf — decoratief (gradiënten)  */
    --acc-soft:    #80CED7;   /* Aqua accent (highlights op donkere vlakken)    */
    /* Exact de kleur uit assets/img/logo.svg — nagemeten, niet overgeschreven.
       Stond hier als #009FE3 onder de naam --gold (een restant uit een ander
       project) en werd nergens gebruikt. Nu klopt de waarde én de naam. */
    --logo-cyan:   #009EE3;   /* De letter die "opstaat" in het logo (cyaan)    */
    /* Enige warme kleur op de site. Zit niet in het Marine Blue-palet, maar de
       briefing vraagt om een oranje accentstreep bij het expertinzicht-kader in
       de Academy-artikelen. Gebruik hem nergens anders — juist doordat het de
       enige warme kleur is, trekt dat ene kader de aandacht. Wil je hem toch
       blauw, zet deze waarde dan op var(--logo-cyan). */
    --expert:      #E07A31;   /* Oranje accentstreep bij Expertinzicht          */
    --ink:         #0B1F2A;   /* Hoofdtekst / donkere elementen                 */
    --ink-soft:    #3D5561;   /* Zachtere bodytekst                             */
    --muted:       #4E6874;   /* Subtiele tekst / labels (4.5:1 op --tint)      */
    --paper:       #F7FAFB;   /* Standaard achtergrond (koel wit)               */
    --paper-2:     #FFFFFF;   /* Kaarten / panelen                              */
    --tint:        #DCE8EA;   /* Zachte sectie-achtergrond (ijsblauw)           */
    --tint-2:      #CCDBDC;   /* Iets steviger ijsblauw (chips, accentvlakken)  */
    --dark:        #003249;   /* Donkere sectie-achtergrond                     */
    --footer:      #00212F;   /* Footer-achtergrond                             */
    --on-dark:     #EAF4F6;   /* Tekst op donkere vlakken                       */
    --on-dark-mut: rgba(234,244,246,.72);  /* Subtiele tekst op donker          */
    --on-dark-faint: rgba(234,244,246,.56);/* Copyright / juridische regels     */
    --line:        rgba(11,31,42,.11);      /* Dunne lijnen / randen            */
    --field-line:  #7C939E;   /* Rand van invoervelden — 3:1, dus zichtbaar     */
    --line-dark:   rgba(255,255,255,.12);

    /* ---- Afgeleide accenten ---- */
    --acc-wash:    rgba(0,100,138,.10);   /* Zachte vulling achter icoontjes    */
    --acc-ring:    rgba(0,100,138,.20);   /* Focus-ring om formuliervelden      */
    --sel:         rgba(0,126,167,.18);   /* Tekstselectie                      */

    /* ---- Statuskleuren (formulier) ---- */
    --ok-bg:   #E6F2F0;  --ok-line:  #A9D4CC;  --ok-ink:  #12554A;
    --err-bg:  #FBEDE9;  --err-line: #EFC5B6;  --err-ink: #9A3B18;
    --err:     #B4451F;

    /* ---- Overlays op beeld ---- */
    --scrim:        linear-gradient(to top, rgba(0,20,30,.82), rgba(0,20,30,.05) 60%);
    --scrim-soft:   linear-gradient(to top, rgba(0,20,30,.40), transparent 70%);

    /* ---- Gradiënten ----
       De radial-lagen geven diepte; de linear-laag bepaalt de basiskleur. */

    /* Effen terugvalkleur onder de hero-gradiënt (zichtbaar vóór het laden) */
    --hero-fallback: #004E70;

    /* Grote marineblauwe hero (home + subpagina-koppen) */
    --grad-hero:
        radial-gradient(115% 120% at 82% 8%, rgba(128,206,215,.52), transparent 55%),
        radial-gradient(120% 120% at 8% 95%, rgba(0,159,227,.40), transparent 52%),
        linear-gradient(155deg, #00293C 0%, #004E70 46%, #007EA7 100%);

    /* Donkere overlay onderaan de hero (leesbaarheid) */
    --grad-hero-veil:
        linear-gradient(to top, rgba(0,26,40,.40) 0%, rgba(0,26,40,.05) 48%, transparent 74%);

    /* Afsluitende call-to-action-band (diep navy) */
    --grad-cta:
        radial-gradient(120% 130% at 30% 20%, rgba(0,126,167,.45), transparent 60%),
        linear-gradient(155deg, #003249, #00212F);

    /* "De impact in één oogopslag" — de drie ademende cirkels */
    --circle-1: radial-gradient(circle at 34% 30%, #00668E, #003249 78%);
    --circle-2: linear-gradient(150deg, #EAF3F4, #CCDBDC);
    --circle-3: linear-gradient(150deg, #C8E6E9, #9AD1D4);

    /* "Waar maakt SO het verschil" — de vier tegels */
    --tile-1: linear-gradient(150deg, #003D58, #00648A);
    --tile-2: linear-gradient(150deg, #0A4A63, #2E7E96);
    --tile-3: linear-gradient(150deg, #17323F, #43616F);
    --tile-4: linear-gradient(150deg, #005F80, #4FA3B8);

    /* Beeld-panelen (staan voor foto's die de klant later plaatst) */
    --panel-1: linear-gradient(150deg, #E9F2F3, #CCDBDC);
    --panel-2: linear-gradient(150deg, #D9EDEF, #9AD1D4);
    --panel-3: linear-gradient(150deg, #DEEBEF, #A9C6D2);
    --panel-4: linear-gradient(150deg, #CFE7EB, #80CED7);

    /* Donker beeld-/videovlak (bv. praktijkvideo) */
    --media-dark:
        radial-gradient(120% 120% at 60% 30%, rgba(0,126,167,.42), transparent 55%),
        linear-gradient(150deg, #00212F, #114A62);

    /* Schaduwen — koel getint, passend bij het navy */
    --shadow-tint:    rgba(0,40,60,.18);
    --shadow-tint-lg: rgba(0,40,60,.34);
}