/*
  Design tokens.

  Overgenomen uit TGP_website_v52.html, ongewijzigd. Dit bestand is de enige
  plek waar een kleurwaarde hoort te staan. Alles daarna verwijst hiernaar.
*/

:root {
  /* Kleuren, letterlijk uit v52 */
  --blush: #F2C4CE;
  --rose: #D4748A;
  --mauve: #9E5A6E;
  --noir: #1A0F12;
  --cream: #FDF6F0;
  --dusty: #C9A0AC;
  --wine: #7A3248;
  --gold: #C8A97E;

  /* De negende kleur. Stond in v52 niet in :root maar wel op drie plekken
     los in de CSS: de badge op de kaart, de hover in het menu en de pil met
     een actief filter. Hier alsnog benoemd, zodat er nergens anders een
     hex-waarde staat. */
  --blush-licht: #FAE8ED;

  /* Zes kleuren die alleen op de productpagina van v52 stonden, ook daar los
     in de CSS. Vijf ervan zijn eindpunten van een verloop, de laatste is het
     groen van de vinkjes in de vergelijkingstabel. */
  --wit: #FFFFFF;
  --noir-diep: #2A1218;
  --cream-zand: #F9EEE6;
  --cream-roze: #FAEBE3;
  --gold-licht: #D4AC82;
  --groen: #2D7A4A;

  /* Twee lijnkleuren die alleen in de :root van checkout.html stonden. Het
     zijn mauve met transparantie, dus geen nieuwe kleur, wel een eigen naam
     omdat ze door de hele checkout heen terugkomen. */
  --lijn: rgba(158, 90, 110, 0.18);
  --lijn-zacht: rgba(158, 90, 110, 0.1);

  /* De warme zandtint uit het verloop achter de voordelenbanner op de
     homepage. Stond in v52 los in de CSS. */
  --cream-warm: #FAF0E8;

  /* Fontstacks. De fallbacks zijn belangrijk: tot de webfont binnen is
     rendert de browser hiermee, en dat scheelt een layout shift. */
  --font-body: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Cormorant Garamond', 'Times New Roman', Times, serif;

  /* Breedtes, gelijk aan de secties in v52 */
  --breedte-max: 1400px;
  --breedte-tekst: 720px;

  /* De horizontale marge van de header en de secties in v52 */
  --marge-zijkant: 5%;
}