/* ==========================================================================
   LOOK: POSTER (alternatief) – nachtblauw, fluweelrood en goud
   Kies deze look via Weergave > Aanpassen > "Groetjes - look".
   Dit bestand heeft dezelfde onderdelen als look-paars.css; pas hier alleen
   de waarden achter de dubbele punt aan.
   ========================================================================== */

:root {

	/* ---------- Deel 1 - paletkleuren van de poster ---------- */
	--gvs-fluweelrood:     #C8102E;
	--gvs-donkerrood:      #A50F26;
	--gvs-nachtblauw:      #06124A;
	--gvs-footerblauw:     #050F40;
	--gvs-goud-poster:     #FBBF24;
	--gvs-lichtgoud:       #FFD24A;
	--gvs-creme:           #FFF7E0;
	--gvs-papier:          #FFFAF0;
	--gvs-perkament:       #F8E3B0;
	--gvs-inkt-poster:     #0A1747;

	/* ---------- Deel 2 - afgeleid ---------- */
	--gvs-tekst-poster:    #26305F;
	--gvs-gedempt-poster:  #4A557F;
	--gvs-op-nacht:        #C9D5F5;

	/* ---------- Deel 3 - rollen ---------- */
	--gvs-accent:          var(--gvs-fluweelrood);
	--gvs-accent-donker:   var(--gvs-donkerrood);
	--gvs-accent-van:      #D91A38;
	--gvs-accent-tot:      var(--gvs-donkerrood);
	--gvs-accent-tekst:    #FFFFFF;

	--gvs-geel:            var(--gvs-goud-poster);
	--gvs-geel-licht:      var(--gvs-lichtgoud);
	--gvs-geel-donker:     #A8650A;
	--gvs-geel-van:        var(--gvs-lichtgoud);
	--gvs-geel-tot:        var(--gvs-goud-poster);
	--gvs-geel-tekst:      #2B1600;
	--gvs-geel-gloed:      rgba(251, 191, 36, .32);

	--gvs-donker:          var(--gvs-nachtblauw);
	--gvs-header-van:      var(--gvs-nachtblauw);
	--gvs-header-tot:      var(--gvs-nachtblauw);
	--gvs-header-lijn:     var(--gvs-goud-poster);
	--gvs-voet:            var(--gvs-footerblauw);

	--gvs-kop:             var(--gvs-inkt-poster);
	--gvs-tekst:           var(--gvs-tekst-poster);
	--gvs-gedempt:         var(--gvs-gedempt-poster);
	--gvs-achtergrond:     var(--gvs-papier);
	--gvs-achtergrond-alt: var(--gvs-creme);
	--gvs-rand:            var(--gvs-perkament);
	--gvs-licht:           var(--gvs-creme);
	--gvs-licht-gedempt:   var(--gvs-op-nacht);
	--gvs-link:            var(--gvs-fluweelrood);
	--gvs-link-hover:      var(--gvs-donkerrood);
	--gvs-link-op-donker:  var(--gvs-lichtgoud);

	--gvs-infobalk-bg:     rgba(255, 247, 224, .12);
	--gvs-infobalk-rand:   rgba(255, 247, 224, .16);
	--gvs-omlijnd-rand:    rgba(255, 247, 224, .45);
	--gvs-omlijnd-bg:      rgba(255, 247, 224, .06);

	/* ---------- Deel 4 - lettertypen en groottes ---------- */
	--gvs-font-kop:        'Fraunces', Georgia, 'Times New Roman', serif;
	--gvs-font-tekst:      'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--gvs-font-knop:       var(--gvs-font-tekst);
	--gvs-font-menu:       var(--gvs-font-tekst);

	--gvs-kop-gewicht:     800;
	--gvs-kop-stijl:       normal;
	--gvs-kop-spatie:      -0.01em;
	--gvs-knop-gewicht:    800;
	--gvs-menu-gewicht:    700;

	--gvs-tekst-grootte:   17px;
	--gvs-regelhoogte:     1.7;
	--gvs-menu-grootte:    16px;
	--gvs-knop-grootte:    16px;

	--gvs-h1:              clamp(40px, 2.3rem + 1.8vw, 56px);
	--gvs-h2:              clamp(32px, 1.9rem + 1vw, 40px);
	--gvs-h3:              clamp(24px, 1.5rem + .5vw, 28px);
	--gvs-h4:              22px;
	--gvs-h5:              18px;
	--gvs-h6:              16px;

	--gvs-hero-kicker:     clamp(20px, 1.1rem + 1.2vw, 32px);
	--gvs-hero-titel:      clamp(44px, 1.6rem + 5.2vw, 84px);

	/* Het opvallende woord: schuin en zwaar in Fraunces. Handgeschreven?
	   Zet font op 'Dancing Script', cursive; stijl op normal; gewicht op 700. */
	--gvs-accentwoord-font:    'Fraunces', Georgia, serif;
	--gvs-accentwoord-stijl:   italic;
	--gvs-accentwoord-gewicht: 900;

	/* ---------- Deel 5 - vormen ---------- */
	--gvs-radius-knop:     999px;
	--gvs-radius-kaart:    22px;
	--gvs-radius-bar:      18px;
	--gvs-header-lijn-dikte: 3px;
	--gvs-menu-actief-lijn: var(--gvs-geel);  /* streepje onder de actieve menu-pagina */
	--gvs-header-hoogte:   88px;
	--gvs-header-hoogte-mobiel: 72px;
	--gvs-logo-breedte:    64px;
	--gvs-logo-vorm:       circle(46.3% at 49.8% 49.2%);  /* knipt het ronde logo uit de vierkante afbeelding */
	--gvs-container:       1240px;

	--gvs-overlay:
		linear-gradient(90deg, rgba(3, 10, 46, .96) 0%, rgba(3, 10, 46, .88) 28%, rgba(3, 10, 46, .5) 54%, rgba(3, 10, 46, .1) 80%, rgba(3, 10, 46, 0) 100%),
		linear-gradient(0deg, rgba(3, 10, 46, .6) 0%, rgba(3, 10, 46, 0) 34%);
	--gvs-overlay-mobiel:
		linear-gradient(180deg, rgba(3, 10, 46, .86) 0%, rgba(3, 10, 46, .7) 55%, rgba(3, 10, 46, .9) 100%);
}

/* ---------- Deel 6 - koppeling met de plug-in ----------
   Dezelfde waarden als hierboven, vertaald naar de namen die de plug-in gebruikt.
   'html:root' zorgt dat deze waarden altijd winnen van de standaardwaarden in de plug-in. */
html:root {
	--gvsf-night-950: #030A2E;
	--gvsf-night-900: #06124A;
	--gvsf-night-850: #07194F;
	--gvsf-night-800: #0A2278;
	--gvsf-night-700: #0D2F9A;
	--gvsf-sky:       #0155C5;
	--gvsf-sky-deep:  #003487;
	--gvsf-sky-mid:   #0A2A86;
	--gvsf-sky-hero:  #052B8A;
	--gvsf-sky-glow:  rgba(70, 140, 255, .42);
	--gvsf-sky-glow-soft: rgba(40, 90, 200, .30);
	--gvsf-sky-glow-hero: rgba(80, 150, 255, .5);
	--gvsf-blue-bright: #1A45B8;
	--gvsf-blue-light:  #2A60D0;
	--gvsf-text-on-night: #DCE6FF;
	--gvsf-btn-a1: #C9162F;
	--gvsf-btn-a2: #99101F;
	--gvsf-btn-b1: #E32B41;
	--gvsf-btn-b2: #A50F26;
	--gvsf-btn-c1: #D91F36;
	--gvsf-btn-c2: #9D1023;
	--gvsf-btn-d2: #94101F;
	--gvsf-gold-100:  #FFF3C4;
	--gvsf-gold-200:  #FFE58A;
	--gvsf-gold-300:  #FFD24A;
	--gvsf-gold-400:  #FBBF24;
	--gvsf-gold-500:  #F2A81D;
	--gvsf-gold-600:  #C97A0A;
	--gvsf-gold-800:  #7A3F05;
	--gvsf-red-400:   #E02A40;
	--gvsf-red-500:   #C8102E;
	--gvsf-red-600:   #A50F26;
	--gvsf-red-800:   #6D0A18;
	--gvsf-cream:     #FFF7E0;
	--gvsf-parchment: #F8E3B0;
	--gvsf-paper:     #FFFAF0;
	--gvsf-ink:       #0A1747;
	--gvsf-muted:     #4A557F;
	--gvsf-pink:      #FF1493;
	--gvsf-accent-fill: linear-gradient(180deg, #FFF3B0 0%, #FFE27A 28%, #FFC83A 60%, #F5A91F 100%);
	--gvsf-font-display: var(--gvs-font-kop);
	--gvsf-font-body:    var(--gvs-font-tekst);
	--gvsf-radius:       var(--gvs-radius-kaart);
}