/* ============================================================
   Bitkoning Master Brand — Spacing
   Non-linear 10-step scale (--bk-space-0 t/m -9), semantic gap aliases (§14.6)
   en component-padding tokens (§14.7). Utility-classes (.bk-stack/-cluster/
   -section, §14.8) staan in bitkoning-spacing-utilities.css.
   Bron van waarheid: master §14.1. Productie-bron.
   ============================================================ */

:root {
  /* §14.1 De raw scale — 10 steps, BEWUST non-linear.
     Onderaan 4px-stappen (precisie), bovenaan 16–32px-stappen (clear stops).
     Een 20px gap bestaat NIET — visueel nauwelijks te onderscheiden van 16/24. */
  --bk-space-0: 2px;   /* hairlines, focus-ring offset */
  --bk-space-1: 4px;   /* icon-to-label, pill padding */
  --bk-space-2: 8px;   /* related items, tight gaps */
  --bk-space-3: 12px;  /* card internal, form-field gaps */
  --bk-space-4: 16px;  /* default — card padding, ¶ margins */
  --bk-space-5: 24px;  /* between content groups */
  --bk-space-6: 32px;  /* between sections, large card padding */
  --bk-space-7: 48px;  /* major section breaks, hero padding */
  --bk-space-8: 64px;  /* page-section vertical rhythm */
  --bk-space-9: 96px;  /* hero blocks, marketing sections */

  /* §14.6 Semantic gap aliases — druk de intentie uit i.p.v. het cijfer.
     Bind-points: hertbind hier om een hele laag te verschuiven. */
  --bk-gap-tight: 8px;     /* binnen component — getrouwde elementen */
  --bk-gap-snug: 12px;     /* binnen component — gerelateerd */
  --bk-gap-medium: 16px;   /* tussen componenten — default */
  --bk-gap-relaxed: 24px;  /* tussen componenten — ruimer */
  --bk-gap-loose: 32px;    /* tussen sections — apart */
  --bk-gap-section: 48px;  /* major section breaks */
  --bk-gap-page: 64px;     /* page-level rhythm */
  --bk-gap-hero: 96px;     /* hero blocks, marketing */

  /* §14.7 Component-specific padding-tokens (Y / X paren, voor padding-shorthand).
     Eén keer beslist zodat geen enkele padding meer ter discussie staat. */
  --bk-pad-card: 16px 24px;       /* standaard card */
  --bk-pad-card-lg: 24px 32px;    /* grote/feature cards */
  --bk-pad-input: 8px 12px;       /* input fields */
  --bk-pad-button: 8px 16px;      /* standaard button */
  --bk-pad-button-lg: 12px 24px;  /* hero CTA */
  --bk-pad-pill: 4px 12px;        /* standaard pill */
  --bk-pad-page: 24px;            /* page-edge padding (mobile) */
  --bk-pad-page-lg: 48px;         /* page-edge padding (desktop) */
}