/* Huisstijl van Creative Studio Jogi: de enige bron van kleuren, letters, knoppen en labels.
   Uitleg en downloads: /huisstijl. Andere projecten (bestelformulier, admin) gebruiken een exacte kopie van dit bestand.
   Wijzig je hier iets, kopieer het dan ook naar die projecten; hun tests controleren dat de kopie gelijk is. */

@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-cursief.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --nacht: #16120f;        /* warm donker: opening, contact, voet, donkere kaart */
  --omber: #231d19;        /* tweede donker: de band "Zo werkt het" */
  --wit: #ffffff;          /* lichte vlakken */
  --wit-zacht: #f6f6f5;    /* afwisselend licht vlak, neutraal (geen beige) */
  --blush: #e9c3b3;        /* roze accent op donker */
  --blush-zacht: #f9ebe6;  /* rondje achter de vinkjes op wit */
  --roze: #9a5c60;         /* roze voor tekst, pijltjes en vinkjes op wit */
  --tekst: #1d1a19;        /* lopende tekst op wit */
  --zacht: #5c5957;        /* zachte tekst op wit */
  --taupe: #b3aca6;        /* zachte tekst op donker */
  --lijn: #e7e5e3;         /* dunne lijnen op wit */
  --lijn-donker: rgb(244 238 230 / .12);
  --serif: "EB Garamond", Georgia, serif;
  --letter: "Schibsted Grotesk", system-ui, sans-serif;
  --vloeiend: cubic-bezier(.2, .7, .2, 1);
}

/* Labels: kleine hoofdletters met ruime letterafstand */
.label { margin-bottom: 1rem; font-size: .66rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--blush); }
.label-accent { color: var(--roze); }

/* Knop: witte pil met een roze pijltje */
.knop { display: inline-flex; align-items: center; gap: .8rem; padding: 1rem 1.3rem 1rem 1.7rem; border-radius: 999px; background: var(--wit); color: var(--tekst); font: 500 .98rem/1 var(--letter); text-decoration: none; box-shadow: 0 0 0 1px var(--lijn); cursor: pointer; transition: box-shadow .35s ease, transform .35s var(--vloeiend); }
.knop-pijl { flex: none; display: grid; place-items: center; color: var(--roze); transition: transform .45s var(--vloeiend); }
.knop-pijl svg { width: 18px; height: 18px; }
.knop:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--roze), 0 14px 30px rgb(22 18 15 / .14); }
.knop:hover .knop-pijl { transform: translate(3px, -3px); }
/* Donkere pil op wit */
.knop-donker { background: var(--nacht); color: var(--wit); box-shadow: none; }
.knop-donker .knop-pijl { color: var(--blush); }
.knop-donker:hover { box-shadow: 0 14px 30px rgb(22 18 15 / .25); }
/* Omlijnde pil op donker */
.knop-lijn { display: inline-flex; align-items: center; gap: .6rem; min-height: 50px; padding: 0 1.6rem; border: 1px solid rgb(244 238 230 / .3); border-radius: 999px; color: var(--wit); font: 500 .98rem/1 var(--letter); text-decoration: none; transition: border-color .3s ease, transform .35s var(--vloeiend); }
.knop-lijn:hover { border-color: var(--wit); transform: translateY(-2px); }
.knop-lijn svg { width: 18px; height: 18px; }
/* Omlijnde pil op wit */
.knop-rand { display: inline-flex; align-items: center; min-height: 50px; padding: 0 1.5rem; border: 1px solid #cfcbc7; border-radius: 999px; color: var(--tekst); font-weight: 500; text-decoration: none; transition: border-color .3s ease, transform .35s var(--vloeiend); }
.knop-rand:hover { border-color: var(--tekst); transform: translateY(-2px); }