/* ============================================================
   MatchMatters — Spacing, shape & elevation tokens
   Signature detail: SHARP corners (radius 0) on every main block,
   card and primary button. Only small utilities may round 5-8px.
   ============================================================ */

:root {
  /* ---- Spacing scale -------------------------------------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ---- Section rhythm (royale witruimte, maar niet leeg) ---
     Matthew (31-08): "veel open grote lege vlakken/ruimtes nog". Op 1440 px gaf 7vw
     ruim 100 px boven EN onder elke sectie, dus 200 px leegte tussen twee banden met
     dezelfde achtergrond. Verlaagd; --section-pad-y-tight vangt dat aangrenzende geval. */
  --section-pad-y: clamp(40px, 4.8vw, 72px);
  --section-pad-y-tight: clamp(24px, 2.6vw, 40px);
  --section-pad-x: clamp(20px, 5vw, 64px);
  /* De zijmarge van .wrap. Stond als losse clamp in app.css; nu een token, zodat een
     blok dat bewust buiten de kolom steekt (zoals de sticky balk van de skill-matrix)
     exact dezelfde waarde kan gebruiken. */
  --wrap-pad-x: clamp(16px, 4vw, 40px);
  --container-max: 1200px;
  --container-narrow: 820px;

  /* ---- Radii ---------------------------------------------- */
  --radius-0:    0;       /* DEFAULT — blocks, cards, primary buttons */
  --radius-sm:   6px;     /* utility only: search field, chat bubbles */
  --radius-md:   8px;     /* utility only: WhatsApp button            */
  --radius-pill: 999px;   /* skill-chips exception                    */

  /* ---- Button geometry ------------------------------------ */
  --btn-pad-y:  9px;
  --btn-pad-x:  22px;
  --btn-pad-y-lg: 13px;
  --btn-pad-x-lg: 30px;

  /* ---- Borders -------------------------------------------- */
  --border-hairline: 1px solid var(--border-on-light);
  --border-stat:     1px solid rgba(2, 39, 51, 0.18); /* @kind other */

  /* ---- Elevation (used sparingly — mostly flat) ----------- */
  --shadow-none: none;
  --shadow-soft: 0 2px 10px rgba(2, 39, 51, 0.08);   /* white cards on grey */
  --shadow-card: 0 8px 30px rgba(2, 39, 51, 0.12);   /* raised vacancy card  */
  --shadow-pop:  0 16px 48px rgba(2, 39, 51, 0.22);  /* hero overlay widgets  */

  /* ---- Motion --------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
}