:root {
  /* Anker & grond */
  --ov-navy: #15212b;
  --ov-navy-deep: #233544;
  --ov-cream: #f4f2ec;
  --ov-sand: #e7e4db;
  --ov-sand-deep: #d8d5cc;

  /* Labelaccenten — heldere vlakken */
  --ov-orange: #ff6a3d;
  --ov-piste: #1f5fd0;
  --ov-lime: #8ec63f;

  /* Labelaccenten — donkere tonen, voor tekst op licht en ingedrukte staten */
  --ov-orange-ink: #d1521f;
  --ov-piste-ink: #17469b;
  --ov-lime-ink: #6b942a;

  /* Lichte toon van een donker accent, uitsluitend voor tekst op een donkere
     grond. Pisteblauw is te donker om op navy te lezen (2,81:1); deze haalt daar
     6,82:1. Nooit als vlakkleur gebruiken, dan leest hij niet als merkkleur.
     Bij oranje en limoen is dit dezelfde kleur als het accent zelf, zodat elke
     pagina hetzelfde token kan gebruiken zonder uitzondering per label. */
  --ov-piste-soft: #7fa8f0;

  /* HOOFDKLEUREN VAN DE DRIE MERKEN ZONDER EIGEN AFDELINGSPAGINA
     Vastgesteld door Jasper op 9 september 2026. Het klimcentrum en de twee
     restaurants hebben hun eigen kleur; de drie afdelingen hierboven houden
     oranje, pisteblauw en limoen.

     Zelf nagerekend, want dat bepaalt waar je ze wel en niet voor kunt
     gebruiken (WCAG 2.1, 4,5:1 voor gewone tekst en 3:1 voor grote tekst):

       kleur              op navy   op crème   crème op het vlak   navy op het vlak
       cervinogoud        7,30:1    2,00:1     2,00:1              7,30:1
       berghutolijf       2,39:1    6,12:1     6,12:1              2,39:1
       pannenkoekgroen    3,59:1    4,06:1     4,06:1              3,59:1

     Dus: cervinogoud kan als tekst op navy en heeft navy tekst nodig op het
     vlak zelf. Berghutolijf is het omgekeerde: als tekst op crème, en met crème
     tekst op het vlak. Pannenkoekgroen haalt nergens 4,5:1, dus dat is een
     vlak- en stipkleur en geen tekstkleur; wil je het toch als tekst, dan
     alleen groot en vet. */
  --ov-cervino: #d1a83a;
  --ov-berghut: #605b3e;
  --ov-pannenkoekhut: #6c7b59;

  /* Signaal */
  --ov-error: #c0392b;
  --ov-success: var(--ov-lime-ink);

  /* Semantische aliassen */
  --surface-page: var(--ov-cream);
  --surface-panel: var(--ov-sand);
  --surface-anchor: var(--ov-navy);
  --surface-anchor-deep: var(--ov-navy-deep);
  --text-body: var(--ov-navy);
  --text-muted: rgba(21, 33, 43, 0.72);
  --text-invert: var(--ov-cream);
  --text-invert-muted: rgba(244, 242, 236, 0.72);
  --border-hairline: rgba(21, 33, 43, 0.16);
  --border-strong: rgba(21, 33, 43, 0.45);
  --border-invert: rgba(244, 242, 236, 0.4);

  /* Actief label — standaard Outdoor Valley */
  --accent: var(--ov-orange);
  --accent-ink: var(--ov-orange-ink);
  --accent-on: var(--ov-navy);
  --accent-soft: var(--ov-orange);
}

/* Labelthema's: zet data-label op een willekeurige wrapper.
   --accent      vlak, bijvoorbeeld een knop of een balk
   --accent-ink  tekst op een lichte grond
   --accent-on   tekst op het accentvlak
   --accent-soft tekst op een donkere grond */
[data-label="valley"] {
  --accent: var(--ov-orange);
  --accent-ink: var(--ov-orange-ink);
  --accent-on: var(--ov-navy);
  --accent-soft: var(--ov-orange);
}
[data-label="wintersport"] {
  --accent: var(--ov-piste);
  --accent-ink: var(--ov-piste-ink);
  --accent-on: var(--ov-cream);
  --accent-soft: var(--ov-piste-soft);
}
[data-label="sports"] {
  --accent: var(--ov-lime);
  --accent-ink: var(--ov-lime-ink);
  --accent-on: var(--ov-navy);
  --accent-soft: var(--ov-lime);
}

/* BRUILOFTSTHEMA, ALLEEN OP /trouwen/
   Zacht roze en petrol, op verzoek van Jasper (13 oktober 2026): de pagina
   moet uitnodigen voor een bruiloft en meer festivalgevoel geven. Zelfde
   aanpak als Winter Glow: eigen kleuren, maar dezelfde opbouw, letters en
   onderdelen als de rest van de site. Het menu en de footer houden de
   huisstijl; dit thema staat op een omhulsel om de inhoud van de pagina.

   Navy en zand worden binnen het thema petrol en blush, zodat elk onderdeel
   dat die tokens gebruikt vanzelf meekleurt. Nagerekend (WCAG 2.1):
     petrol #1e3f47 op crème            10,10:1
     crème op petrol                    10,10:1
     petrol-ink #3a6b74 op crème         5,31:1
     petrol op blush #f2b8c6             6,70:1
     blush als tekst op petrol           6,70:1
     petrol op blush-zand #f6e6e9        9,38:1 */
[data-thema="bruiloft"] {
  --ov-navy: #1e3f47;
  --ov-navy-deep: #2a5058;
  --ov-sand: #f6e6e9;
  --ov-sand-deep: #ecd3d8;
  --tw-blush: #f2b8c6;
  --tw-petrol: #1e3f47;
  --tw-petrol-ink: #3a6b74;
  --accent: var(--tw-blush);
  --accent-ink: var(--tw-petrol-ink);
  --accent-on: var(--tw-petrol);
  --accent-soft: var(--tw-blush);
  --text-body: var(--tw-petrol);
}