/* DRP Huisstijlhandboek v3 (oktober 2026), gedeeld door alle pagina's van de website.
   Waarden uit hoofdstuk 11, design tokens (p31). Geen eigen tinten toevoegen. */
:root {
  --ink: #260065;
  --beige: #f9e4d2;
  --alt: #f6f6f6;
  --wit: #ffffff;
  --accent: #ff551a;
  --accent-hover: #ff7042;
  --lila: #a489a6;
  --ster-lila: #ceb6bc;
  --ster-blauw: #200183;
  --donker-oranje: #ee4014;
  --nummer: #0c06fc;
  --lijn: #efd3be;
  --schaduw-kaart: 0 20px 40px -12px rgba(38, 0, 101, 0.15);
  --ster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 81 84'%3E%3Cpath d='M44.86,49.09l4.23,34.06h-17.38l4.23-34.06-27.48,20.67L0,54.72l31.47-13.15L0,27.95l8.69-14.8,27.24,20.67L31.71,0h17.38l-4.23,33.82,27.24-20.43,8.45,15.03-31.71,13.15,31.71,13.15-8.92,15.03-26.77-20.67Z'/%3E%3C/svg%3E");
  color-scheme: light;
}

body { background: var(--beige); color: var(--ink); }
strong, b { color: inherit; font-weight: 800; }

/* Koppen in twee kleuren (p15): eerste deel donkerblauw, tweede deel lila.
   Oranje alleen als streep onder één sleutelwoord. */
.h-display { font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; }
.tweede { color: var(--lila); }
.streep { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 0.09em; text-underline-offset: 0.12em; text-decoration-skip-ink: none; }

/* Label boven een kop (p11, p14): oranje versalen met de kleine ster ervoor. */
.label { display: inline-flex; align-items: flex-start; gap: 0.55em; color: var(--accent); font-size: 12px; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.1em; }
.label::before { content: ''; flex: none; width: 1.05em; height: 1.05em; margin-top: 0.05em; background: currentColor; -webkit-mask: var(--ster) center / contain no-repeat; mask: var(--ster) center / contain no-repeat; }
.label-zacht { color: var(--ster-lila); }
.label-zacht::before { background: var(--accent); }

/* Opsomming met de ster in plaats van een bolletje (p11). */
.ster-lijst > li { display: flex; gap: 0.75rem; align-items: flex-start; }
.ster-lijst > li::before { content: ''; flex: none; width: 0.9em; height: 0.9em; margin-top: 0.3em; background: var(--accent); -webkit-mask: var(--ster) center / contain no-repeat; mask: var(--ster) center / contain no-repeat; }

/* Cijfers in JetBrains Mono (p13, p20). */
.font-mono, .cijfer { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0; }

/* Kaarten wit, hoeken 16 px, schaduw uit de tokens (p21, p31). */
.bg-white.rounded-2xl, .kaart, .schaduw { box-shadow: var(--schaduw-kaart); }

/* Donkerblauw alleen als vak (p10, p27). Tekst wit, lopende tekst ster lila (p17). */
.vak-donker { position: relative; overflow: hidden; border-radius: 16px; background: var(--ink); color: var(--wit); }

/* De grote ster: rechtsonder, aflopend over de rand, 10 graden gedraaid, één per vlak (p12). */
.grote-ster { position: absolute; right: -6%; bottom: -14%; width: 33%; max-width: 460px; min-width: 160px; aspect-ratio: 81 / 84; transform: rotate(10deg); pointer-events: none; z-index: 0; }
.grote-ster.rechts-midden { bottom: auto; top: 50%; transform: translateY(-50%) rotate(10deg); }
.ster-op-beige { color: var(--ster-lila); }
.ster-op-ink { color: var(--ster-blauw); }
.ster-op-oranje { color: var(--donker-oranje); }

/* Knoppen altijd pil (p21): hoofdactie oranje, tweede actie met lijn. */
.btn-primary { background: var(--accent); color: var(--wit); transition: background-color .16s ease, transform .16s ease; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-outline { border: 1.5px solid var(--lijn); color: var(--ink); transition: background-color .16s ease, border-color .16s ease; }
.btn-outline:hover { background: var(--wit); border-color: var(--ink); }
.btn-outline:active { transform: translateY(1px); }
.btn-primary:disabled, .btn-outline:disabled { opacity: .5; cursor: not-allowed; }

/* Tag (p21): beige pil met lijn en oranje punt, tekst donkerblauw. */
.tag { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 1rem; border-radius: 9999px; background: var(--beige); border: 1px solid var(--lijn); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.tag::before { content: ''; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--accent); }

::selection { background: var(--accent); color: var(--wit); }
*:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Op een oranje actievlak (p19): tekst wit, kleine ster donkerblauw. */
.label-op-oranje { color: var(--wit); }
.label-op-oranje::before { background: var(--ink); }

/* Lopende tekst op donkerblauw: ster lila; nadruk wit (p17). */
.vak-donker .zacht { color: var(--ster-lila); }
.vak-donker .zacht strong, .vak-donker .zacht b { color: var(--wit); }

/* Placeholders in lila (handboek v3), niet het grijs van de browser. */
::placeholder { color: #a489a6; opacity: 1; }