/*
 * Design tokens: de bouwstenen van de huisstijl
 * ------------------------------------------------------------------------
 * Hier staan alle kleuren, lettertypen, lettergroottes, afstanden en
 * afrondingen op één plek. Wil je later de huisstijl bijsturen, dan pas je
 * het hier aan en verandert de hele site mee.
 *
 * KLEURMODUS
 * De site is standaard LICHT. In het beheer (Weergave > Aanpassen >
 * MR&MRS CHOP) kies je:
 *   Licht        warm papier, donkere tekst, teal accent (standaard)
 *   Donker       bijna zwart, witte tekst, lichtere teal
 *   Automatisch  volgt de instelling van het apparaat van de bezoeker
 * De keuze staat als data-mc-mode="light|dark|auto" op <html>
 * (zie inc/appearance.php).
 *
 * HOE DE KLEUREN ZIJN OPGEBOUWD (naar het voorbeeld van Spotify's Encore)
 * 1. Ruwe kleuren: elke kleurcode staat hier precies één keer
 *    (--paper-* voor licht, --night-* voor donker).
 * 2. Rollen: de rest van de CSS gebruikt alleen rollen (--c-bg, --c-text,
 *    --c-accent ...). Een rol wijst naar een ruwe kleur.
 * 3. Sets: een sectie kiest een set, en die zet de rollen voor alles
 *    daarbinnen:
 *      (geen klasse)    basis, volgt de gekozen modus
 *      .mc-set-alt      rustige variant van de basis (andere tint vlak)
 *      .mc-set-inverse  altijd het omgekeerde van de modus (bijv. een
 *                       donkere footer op een lichte site)
 *      .mc-set-accent   teal vlak met donkere tekst
 *      .mc-set-media    tekst over een foto of video (altijd licht op een
 *                       donkere laag, in elke modus)
 *      .mc-set-deep     petrol vlak met lichte tekst en messing: het donkere
 *                       accent, in elke modus gelijk
 *      .mc-set-dark     altijd nacht (bijv. de slider: beeld komt het best
 *                       uit op donker)
 *
 * CONTRAST (WCAG 2.2, nagerekend)
 *   licht: tekst 17,7:1 · gedempt 6,9:1 · accent #05716c 5,3:1 · wit op accent 5,86:1
 *   donker: tekst 19,5:1 · gedempt 9,4:1 · accent #12b8b2 7,9:1 · #080d0f op accent 7,93:1
 *   Let op: wit op de lichte teal #12b8b2 haalt maar 2,46:1. Op teal staat
 *   daarom altijd donkere tekst.
 */

/* ==========================================================================
   1. Ruwe kleuren (elke code één keer) + vaste maten
   ========================================================================== */

:root {
	/* Licht: "papier", warm zoals het hout in de zaak */
	--paper-bg:             #f6f3ee;
	--paper-surface:        #ffffff;
	--paper-elevated:       #ffffff;
	--paper-elevated-hover: #ece7df;
	--paper-alt:            #ece7df;  /* zand, voor .mc-set-alt            */
	--paper-line:           #ddd6cb;
	--paper-line-control:   #6f7b80;  /* randen van invoervelden, 3,9:1    */
	--paper-text:           #080d0f;
	--paper-text-2:         #4a5559;
	--paper-text-3:         #5b676b;
	--paper-accent:         #05716c;
	--paper-accent-hover:   #045a56;
	--paper-accent-press:   #034744;
	--paper-on-accent:      #ffffff;
	--paper-brass:          #7a5c24;
	--paper-warn:           #8a5a00;
	--paper-error:          #b3261e;
	--paper-few-bg:         #fff4d6;  /* agenda: bijna vol                 */
	--paper-few-fg:         #8a5a00;  /* 5,4:1                             */
	--paper-busy-bg:        #eef1f2;  /* agenda: bezet                     */
	--paper-busy-fg:        #5f6b70;  /* 4,8:1                             */
	--paper-taken-bg:       #fdecec;  /* online boeken: bezette tijd (rood, V-009) */
	--paper-taken-fg:       #b3261e;  /* 6,1:1 op taken-bg                 */
	--paper-taken-line:     #e39a94;

	/* Donker: "nacht" */
	--night-bg:             #080d0f;
	--night-surface:        #111a1d;
	--night-elevated:       #172226;
	--night-elevated-hover: #1f2c31;
	--night-alt:            #111a1d;
	--night-line:           #24333a;
	--night-line-control:   #5f7479;  /* 3,96:1                            */
	--night-text:           #ffffff;
	--night-text-2:         #a9b6b9;
	--night-text-3:         #7f9094;
	--night-accent:         #12b8b2;
	--night-accent-hover:   #2fd0c9;
	--night-accent-press:   #079f98;
	--night-on-accent:      #080d0f;
	--night-brass:          #c9a45c;
	--night-warn:           #f0b429;
	--night-error:          #ff8a80;
	--night-few-bg:         #2b2410;
	--night-few-fg:         #ffd27a;  /* 10,8:1                            */
	--night-few-line:       #f0b429;
	--night-busy-bg:        #0c1214;
	--night-busy-fg:        #7f8e92;  /* 5,6:1                             */
	--night-taken-bg:       #2a1213;
	--night-taken-fg:       #ff8a80;  /* 7,6:1 op taken-bg                 */
	--night-taken-line:     #7a2e2a;

	/*
	 * Laag over foto's en video. 68% is nagerekend voor het ergste geval
	 * (een witte foto): witte tekst haalt dan 6,95:1 en --c-text-2 in
	 * .mc-set-media 5,34:1. Lichter maken = eerst opnieuw narekenen.
	 */
	--overlay: rgb(8 13 15 / 0.68);

	/* ---- Lettertypen ----------------------------------------------------- */
	--font-display: "Fraunces Variable", "Fraunces", Georgia, "Times New Roman", serif;
	--font-text:    "IBM Plex Sans Variable", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/*
	 * Lettergroottes die meeschalen met de schermbreedte (clamp: minimum,
	 * voorkeur, maximum). Op een telefoon is een kop dus kleiner dan op een
	 * breed scherm, zonder aparte media queries.
	 */
	--fs-xs:   clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
	--fs-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
	--fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--fs-md:   clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem);
	--fs-lg:   clamp(1.375rem, 1.22rem + 0.75vw, 1.75rem);
	--fs-xl:   clamp(1.75rem, 1.42rem + 1.6vw, 2.625rem);
	--fs-2xl:  clamp(2.25rem, 1.62rem + 3.1vw, 4rem);
	--fs-3xl:  clamp(2.75rem, 1.7rem + 5.2vw, 5.75rem);

	--lh-tight: 1.08;
	--lh-snug:  1.25;
	--lh-text:  1.6;

	/* Labels: smalle Plex in hoofdletters, als belettering op een bord */
	--label-stretch:  82%;
	--label-tracking: 0.14em;

	/* ---- Afstanden ------------------------------------------------------- */
	--sp-1:  0.25rem;
	--sp-2:  0.5rem;
	--sp-3:  0.75rem;
	--sp-4:  1rem;
	--sp-5:  1.5rem;
	--sp-6:  2rem;
	--sp-7:  3rem;
	--sp-8:  4rem;
	--sp-9:  6rem;
	--sp-section: clamp(3.5rem, 2rem + 6vw, 7.5rem); /* boven/onder een sectie */

	/* ---- Layout ---------------------------------------------------------- */
	--container:        76rem;  /* 1216px: maximale breedte van de inhoud  */
	--container-narrow: 46rem;  /*  736px: prettige regellengte voor tekst  */
	--gutter:           clamp(1rem, 0.6rem + 2.2vw, 2.5rem); /* zijmarge    */

	/* ---- Vorm ------------------------------------------------------------ */
	--radius-s:    0.375rem;
	--radius-m:    0.75rem;
	--radius-l:    1.25rem;
	--radius-pill: 999px;
	--tap-min:     2.75rem; /* 44px: minimale grootte van iets aanklikbaars */

	/* ---- Beweging -------------------------------------------------------- */
	--ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
	--dur-fast:  140ms;
	--dur-base:  260ms;
	--dur-slow:  520ms;

	/*
	 * Kadence gebruikt deze twee variabelen voor alle tekst en koppen. We
	 * wijzen ze naar onze lettertypen, zodat ook Kadence-onderdelen en de
	 * blokeditor dezelfde letters tonen.
	 */
	--global-body-font-family:    var(--font-text);
	--global-heading-font-family: var(--font-display);
}

/* ==========================================================================
   2. Rollen per modus en set
   --------------------------------------------------------------------------
   Er zijn twee toewijzingen: "papier" (licht) en "nacht" (donker). Elke
   toewijzing staat hieronder twee keer: één keer voor de vaste keuzes en
   één keer binnen de media query voor "Automatisch". Dat is bewust: de
   nieuwere CSS-functie light-dark() zou dit korter maken, maar werkt niet
   op oudere iPhones (iOS 16 en lager). Pas je een rol aan, doe het dan in
   beide blokken van dezelfde toewijzing.
   ========================================================================== */

/* ---- Papier (licht) --------------------------------------------------------
 * Geldt voor: de standaard, modus Licht, .mc-set-paper, en het omgekeerde
 * van de donkere modus.
 */
:root,
[data-mc-mode="light"],
[data-mc-mode="dark"] .mc-set-inverse,
.mc-set-paper {
	--c-bg:             var(--paper-bg);
	--c-surface:        var(--paper-surface);
	--c-elevated:       var(--paper-elevated);
	--c-elevated-hover: var(--paper-elevated-hover);
	--c-alt:            var(--paper-alt);
	--c-line:           var(--paper-line);
	--c-line-control:   var(--paper-line-control);
	--c-text:           var(--paper-text);
	--c-text-2:         var(--paper-text-2);
	--c-text-3:         var(--paper-text-3);
	--c-accent:         var(--paper-accent);
	--c-accent-hover:   var(--paper-accent-hover);
	--c-accent-press:   var(--paper-accent-press);
	--c-on-accent:      var(--paper-on-accent);
	--c-brass:          var(--paper-brass);
	--c-warn:           var(--paper-warn);
	--c-error:          var(--paper-error);
	--c-focus:          var(--paper-accent);
	--c-few-bg:         var(--paper-few-bg);
	--c-few-fg:         var(--paper-few-fg);
	--c-few-line:       var(--paper-few-fg);
	--c-busy-bg:        var(--paper-busy-bg);
	--c-busy-fg:        var(--paper-busy-fg);
	--c-taken-bg:       var(--paper-taken-bg);
	--c-taken-fg:       var(--paper-taken-fg);
	--c-taken-line:     var(--paper-taken-line);
	color-scheme: light;
}

/* ---- Nacht (donker) --------------------------------------------------------
 * Geldt voor: modus Donker, .mc-set-dark, en het omgekeerde van de lichte
 * modus (ook bij "Automatisch" zolang het apparaat licht is).
 */
[data-mc-mode="dark"],
:root:not([data-mc-mode="dark"]) .mc-set-inverse,
.mc-set-dark {
	--c-bg:             var(--night-bg);
	--c-surface:        var(--night-surface);
	--c-elevated:       var(--night-elevated);
	--c-elevated-hover: var(--night-elevated-hover);
	--c-alt:            var(--night-alt);
	--c-line:           var(--night-line);
	--c-line-control:   var(--night-line-control);
	--c-text:           var(--night-text);
	--c-text-2:         var(--night-text-2);
	--c-text-3:         var(--night-text-3);
	--c-accent:         var(--night-accent);
	--c-accent-hover:   var(--night-accent-hover);
	--c-accent-press:   var(--night-accent-press);
	--c-on-accent:      var(--night-on-accent);
	--c-brass:          var(--night-brass);
	--c-warn:           var(--night-warn);
	--c-error:          var(--night-error);
	--c-focus:          var(--night-accent);
	--c-few-bg:         var(--night-few-bg);
	--c-few-fg:         var(--night-few-fg);
	--c-few-line:       var(--night-few-line);
	--c-busy-bg:        var(--night-busy-bg);
	--c-busy-fg:        var(--night-busy-fg);
	--c-taken-bg:       var(--night-taken-bg);
	--c-taken-fg:       var(--night-taken-fg);
	--c-taken-line:     var(--night-taken-line);
	color-scheme: dark;
}

/* ---- Automatisch, bij een donker ingesteld apparaat ------------------------ */
@media (prefers-color-scheme: dark) {

	/* De basis wordt nacht ... */
	[data-mc-mode="auto"] {
		--c-bg:             var(--night-bg);
		--c-surface:        var(--night-surface);
		--c-elevated:       var(--night-elevated);
		--c-elevated-hover: var(--night-elevated-hover);
		--c-alt:            var(--night-alt);
		--c-line:           var(--night-line);
		--c-line-control:   var(--night-line-control);
		--c-text:           var(--night-text);
		--c-text-2:         var(--night-text-2);
		--c-text-3:         var(--night-text-3);
		--c-accent:         var(--night-accent);
		--c-accent-hover:   var(--night-accent-hover);
		--c-accent-press:   var(--night-accent-press);
		--c-on-accent:      var(--night-on-accent);
		--c-brass:          var(--night-brass);
		--c-warn:           var(--night-warn);
		--c-error:          var(--night-error);
		--c-focus:          var(--night-accent);
	--c-few-bg:         var(--night-few-bg);
	--c-few-fg:         var(--night-few-fg);
	--c-few-line:       var(--night-few-line);
	--c-busy-bg:        var(--night-busy-bg);
	--c-busy-fg:        var(--night-busy-fg);
	--c-taken-bg:       var(--night-taken-bg);
	--c-taken-fg:       var(--night-taken-fg);
	--c-taken-line:     var(--night-taken-line);
		color-scheme: dark;
	}

	/*
	 * ... en het omgekeerde wordt papier. De selector begint bewust met
	 * :root, zodat hij zwaarder weegt dan de nacht-regel
	 * ":root:not([data-mc-mode=dark]) .mc-set-inverse" hierboven (die ook
	 * op "auto" past). Anders zou een omgekeerde sectie donker op donker
	 * worden.
	 */
	:root[data-mc-mode="auto"] .mc-set-inverse {
		--c-bg:             var(--paper-bg);
		--c-surface:        var(--paper-surface);
		--c-elevated:       var(--paper-elevated);
		--c-elevated-hover: var(--paper-elevated-hover);
		--c-alt:            var(--paper-alt);
		--c-line:           var(--paper-line);
		--c-line-control:   var(--paper-line-control);
		--c-text:           var(--paper-text);
		--c-text-2:         var(--paper-text-2);
		--c-text-3:         var(--paper-text-3);
		--c-accent:         var(--paper-accent);
		--c-accent-hover:   var(--paper-accent-hover);
		--c-accent-press:   var(--paper-accent-press);
		--c-on-accent:      var(--paper-on-accent);
		--c-brass:          var(--paper-brass);
		--c-warn:           var(--paper-warn);
		--c-error:          var(--paper-error);
		--c-focus:          var(--paper-accent);
	--c-few-bg:         var(--paper-few-bg);
	--c-few-fg:         var(--paper-few-fg);
	--c-few-line:       var(--paper-few-fg);
	--c-busy-bg:        var(--paper-busy-bg);
	--c-busy-fg:        var(--paper-busy-fg);
	--c-taken-bg:       var(--paper-taken-bg);
	--c-taken-fg:       var(--paper-taken-fg);
	--c-taken-line:     var(--paper-taken-line);
		color-scheme: light;
	}
}

/* ---- Alternatief: dezelfde modus, alleen een andere tint vlak ------------- */
.mc-set-alt {
	--c-bg: var(--c-alt);
}

/* ---- Accent: teal vlak met donkere tekst (in elke modus gelijk) ----------- */
.mc-set-accent {
	--c-bg:           #12b8b2;
	--c-surface:      #2fd0c9;
	--c-line:         rgb(8 13 15 / 0.25);
	--c-line-control: #080d0f;
	--c-text:         #080d0f; /* 7,9:1  */
	--c-text-2:       #0d2a2c; /* 6,2:1  */
	--c-text-3:       #0d2a2c;
	--c-accent:       #080d0f; /* knoppen worden donker met teal tekst */
	--c-accent-hover: #1c2629;
	--c-accent-press: #000000;
	--c-on-accent:    #12b8b2; /* 6,3:1 op #1c2629, 7,9:1 op #080d0f */
	--c-focus:        #080d0f;
	color-scheme: light;
}

/* ---- Diep: petrol vlak met lichte tekst en messing (in elke modus gelijk) --
 * Het "donkere accent" van de site: rustig, warm en duidelijk anders dan
 * papier of nacht. Gebruikt voor de head spa op de homepage. Nagerekend:
 *   wit 12,5:1 · gedempt #cfe3e1 9,4:1 · messing label #d9b872 6,6:1
 *   teal als tekst 5,1:1 · knoppen teal met donkere tekst 7,9:1
 */
.mc-set-deep {
	--c-bg:             #0c3a39;
	--c-surface:        #114846;
	--c-elevated:       #114846;
	--c-elevated-hover: #16524f;
	--c-alt:            #114846;
	--c-line:           rgb(255 255 255 / 0.18);
	--c-line-control:   rgb(255 255 255 / 0.6);
	--c-text:           #ffffff;
	--c-text-2:         #cfe3e1;
	--c-text-3:         #cfe3e1;
	--c-kicker:         #d9b872;
	--c-accent:         var(--night-accent);
	--c-accent-hover:   var(--night-accent-hover);
	--c-accent-press:   var(--night-accent-press);
	--c-on-accent:      var(--night-on-accent);
	--c-brass:          #d9b872;
	--c-focus:          #ffffff;
	color-scheme: dark;
}

/* ---- Over foto of video: altijd lichte tekst op een donkere laag ----------
 * Teal als tekstkleur is over beeld te zwak (2,8:1 in het ergste geval),
 * daarom zijn labels (--c-kicker) hier lichtgrijs. Teal knoppen blijven:
 * daar staat donkere tekst op teal, onafhankelijk van de foto eronder.
 */
.mc-set-media {
	--c-text:         #ffffff;
	--c-text-2:       #dbe3e5;
	--c-text-3:       #dbe3e5;
	--c-kicker:       #dbe3e5;
	--c-accent:       var(--night-accent);
	--c-accent-hover: var(--night-accent-hover);
	--c-accent-press: var(--night-accent-press);
	--c-on-accent:    var(--night-on-accent);
	--c-line-control: rgb(255 255 255 / 0.7);
	--c-brass:        var(--night-brass);
	--c-focus:        #ffffff;
	color-scheme: dark;
}

/* ---- Kleur van de pagina zelf, los van sets --------------------------------
 * Voor overgangen: een sectie die "uit de pagina opkomt" (zie .mc-dusk in
 * sections.css) begint in de kleur van de pagina eromheen, ook als de sectie
 * zelf een andere set heeft. Deze variabelen worden door sets niet
 * overschreven.
 */
/*
 * --mc-dusk is de overgang van de pagina naar de omgekeerde band eronder
 * ("schemering"): in de lichte modus van papier naar nacht, in de donkere
 * modus van nacht naar papier. Met tussenstappen volgens een zachte curve
 * (ease-in-out), zodat er geen harde rand of grauwe band ontstaat.
 * Gebruikt bovenaan de reviewsband op de homepage (.mc-dusk).
 */
:root {
	--mc-page-bg:  var(--paper-bg);
	--mc-page-alt: var(--paper-alt);
	--mc-dusk: linear-gradient(to bottom, #f6f3ee 0%, #edeae6 12%, #d3d1cd 25%, #adaca9 38%, #7f807f 50%, #515454 62%, #2b2f30 75%, #111617 88%, #080d0f 100%);
}

:root[data-mc-mode="dark"] {
	--mc-page-bg:  var(--night-bg);
	--mc-page-alt: var(--night-alt);
	--mc-dusk: linear-gradient(to bottom, #080d0f 0%, #111617 12%, #2b2f30 25%, #515454 38%, #7f807e 50%, #adaca9 62%, #d3d1cd 75%, #edeae6 88%, #f6f3ee 100%);
}

@media (prefers-color-scheme: dark) {
	:root[data-mc-mode="auto"] {
		--mc-page-bg:  var(--night-bg);
		--mc-page-alt: var(--night-alt);
		--mc-dusk: linear-gradient(to bottom, #080d0f 0%, #111617 12%, #2b2f30 25%, #515454 38%, #7f807e 50%, #adaca9 62%, #d3d1cd 75%, #edeae6 88%, #f6f3ee 100%);
	}
}

/* ==========================================================================
   3. Het kleurenpalet van Kadence laten meebewegen met de modus
   --------------------------------------------------------------------------
   Kadence gebruikt --global-palette1..9 voor zijn eigen onderdelen (gewone
   pagina's, blokken). In inc/kadence.php staat het lichte palet als
   standaard; hier draaien we het om voor de donkere modus.
   ========================================================================== */

[data-mc-mode="dark"] {
	--global-palette1: #12b8b2;
	--global-palette2: #2fd0c9;
	--global-palette3: #ffffff;
	--global-palette4: #e6ecee;
	--global-palette5: #a9b6b9;
	--global-palette6: #7f9094;
	--global-palette7: #172226;
	--global-palette8: #080d0f;
	--global-palette9: #111a1d;
}

@media (prefers-color-scheme: dark) {
	[data-mc-mode="auto"] {
		--global-palette1: #12b8b2;
		--global-palette2: #2fd0c9;
		--global-palette3: #ffffff;
		--global-palette4: #e6ecee;
		--global-palette5: #a9b6b9;
		--global-palette6: #7f9094;
		--global-palette7: #172226;
		--global-palette8: #080d0f;
		--global-palette9: #111a1d;
	}
}

/*
 * Arabisch (voorbereid voor later, T-401): nooit letterafstand of
 * hoofdletters op Arabisch schrift (CSS Text 3, par. 7.2.1), en iets meer
 * regelhoogte voor de hogere stokken en de klinkertekens.
 */
:lang(ar) {
	--label-tracking: 0;
	--lh-text: 1.8;
	--lh-snug: 1.4;
}