/* ===========================================================================
   Buro Inzicht — Spacing, radii, containers, elevation, motion
   =========================================================================== */

:root {
  /* --- Spacing scale (rem) ----------------------------------------------- */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-18: 4.5rem;   /* 72 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-28: 7rem;     /* 112 */
  --space-30: 7.5rem;   /* 120 */

  /* Section rhythm — vertical padding for full-width sections.
     Mobile / tablet / desktop respectively. */
  --section-y: 4rem;
  --section-y-md: 6rem;
  --section-y-lg: 7rem;
  /* Horizontal page gutter */
  --page-x: 5%;

  /* --- Radii ------------------------------------------------------------- */
  --radius-button: 0.375rem;   /* 6px  */
  --radius-badge: 0.375rem;    /* 6px  */
  --radius-input: 0.375rem;    /* 6px  */
  --radius-checkbox: 0.125rem; /* 2px  */
  --radius-card: 1rem;         /* 16px */
  --radius-image: 1rem;        /* 16px */
  --radius-full: 9999px;

  /* --- Containers -------------------------------------------------------- */
  --container-sm: 30rem;   /* 480 */
  --container-md: 35rem;   /* 560 */
  --container-lg: 48rem;   /* 768 */
  --container-xl: 64rem;   /* 1024 */
  --container-xxl: 80rem;  /* 1280 — default page container */

  /* --- Breakpoints (reference) ------------------------------------------- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 992px;

  /* --- Elevation --------------------------------------------------------- */
  /* The brand leans flat: most depth comes from color contrast & imagery,
     not shadows. These soft, warm-tinted shadows are used sparingly on
     floating cards / overlays. */
  --shadow-sm: 0 1px 2px rgba(10, 5, 3, 0.08);
  --shadow-md: 0 6px 20px rgba(10, 5, 3, 0.12);
  --shadow-lg: 0 18px 48px rgba(10, 5, 3, 0.22);

  /* --- Motion ------------------------------------------------------------ */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
}