/* ==========================================================================
   Gezondheidskrijger — design tokens
   Bron: claude.ai/design "Gezondheidskrijger Design System"
   (tokens/colors.css, typography.css, spacing.css, motion.css)

   LET OP: dit bestand is de enige plek waar losse hex- en px-waarden mogen
   staan. Elk ander CSS-bestand gebruikt uitsluitend var(--token).
   ========================================================================== */
:root {
  /* Merk — brons (uit knoppen, iconen, checkmarks van de site) */
  --c-brand-50:  #FBF3EA;
  --c-brand-100: #F3E0CA;
  --c-brand-300: #DFA96B;
  --c-brand-500: #C78032; /* primair: knoppen, iconen, actieve staat */
  --c-brand-600: #AE6B25; /* hover */
  --c-brand-700: #8E5518; /* active / tekstlinks / focus op licht */

  /* Goud uit het logo — uitsluitend beloning/insignes, nooit UI-chrome */
  --c-gold-light: #FDD899;
  --c-gold:       #ECB26F;
  --c-gold-deep:  #DA9654;

  /* Inkt — bijna-zwart met blauwe ondertoon */
  --c-ink-900: #03031F;
  --c-ink-700: #1B1B33;
  --c-ink-500: #5A5A79;
  --c-ink-300: #9A9AB0;

  /* Petrol uit het logoschild — donkere secties, coachblokken */
  --c-deep-900: #001629;
  --c-deep-700: #002835;

  /* Ondergronden */
  --c-surface:       #FFFFFF;
  --c-canvas:        #FAF1E9;
  --c-canvas-warm:   #F6EBDD;
  --c-canvas-mute:   #EDE4DB;
  --c-border:        #E4D8CB;
  --c-border-strong: #C8B9AA;
  --c-black:         #000000; /* alleen de topbalk */

  /* Status */
  --c-success:    #81C353;
  --c-success-bg: #F1F8EA;
  --c-warn:       #D9A400;
  --c-warn-bg:    #FDF6E0;
  --c-error:      #C0392B;
  --c-error-bg:   #FBEDEB;
  --c-info:       #2E6F8E;
  --c-info-bg:    #EAF2F6;

  /* Leerlijnen — de vier kwadranten van het schild */
  --c-line-voeding: #C78032;
  --c-line-mindset: #8E5518;
  --c-line-kennis:  #2E6F8E;
  --c-line-kracht:  #002835;

  /* Semantische aliassen — gebruik deze in componenten */
  --text-heading:    var(--c-ink-900);
  --text-body:       var(--c-ink-700);
  --text-muted:      var(--c-ink-500);
  --text-disabled:   var(--c-ink-300);
  --text-on-dark:    #FFFFFF;
  --text-link:       var(--c-brand-700);
  --surface-page:    var(--c-canvas);
  --surface-card:    var(--c-surface);
  --surface-section: var(--c-canvas-warm);
  --surface-locked:  var(--c-canvas-mute);
  --surface-dark:    var(--c-deep-700);
  --border-subtle:   var(--c-border);
  --border-strong:   var(--c-border-strong);
  --action:          var(--c-brand-500);
  --action-hover:    var(--c-brand-600);
  --action-active:   var(--c-brand-700);
  --focus-ring:      0 0 0 3px rgba(199, 128, 50, .35);
  --reward:          linear-gradient(160deg, var(--c-gold-light), var(--c-gold) 45%, var(--c-gold-deep));

  /* De enige twee transparanties die het designsysteem toestaat. */
  --overlay:         rgba(3, 3, 31, .45);      /* modal-overlay, fotobijschrift */
  --text-on-dark-soft: rgba(255, 255, 255, .78); /* witte tekst op donker */

  /* --- Typografie --- */
  --font-display: "Nunito", system-ui, -apple-system, sans-serif; /* koppen, merkstem */
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;  /* lestekst, UI, data */

  --fs-hero:  clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --fs-h1:    clamp(1.85rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-h2:    1.5rem;
  --fs-h3:    1.185rem;
  --fs-lead:  1.125rem;
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  --lh-tight: 1.15;
  --lh-head:  1.25;
  --lh-lead:  1.6;
  --lh-body:  1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --ls-tight:  -0.02em;
  --ls-label:  0.09em;
  --ls-button: 0.08em;

  --measure: 68ch; /* lestekst */

  /* --- Ruimte, vorm, diepte --- */
  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem;   --space-8: 3rem;   --space-10: 4.5rem;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(3,3,31,.04), 0 8px 24px rgba(3,3,31,.06);
  --shadow-lift: 0 2px 4px rgba(3,3,31,.06), 0 16px 40px rgba(3,3,31,.10);

  --container: 1180px;
  --gutter: var(--space-5);
  --touch-min: 44px;

  --bp-sm: 640px; --bp-md: 900px; --bp-lg: 1180px;

  /* --- Beweging --- */
  --ease: cubic-bezier(.2,.7,.3,1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}