/* ─────────────────────────────────────────────────────────────
   Zadanie — Spacing, Layout, Radii, Borders, Motion
   8px grid with a large sectional rhythm. Whitespace is the
   material of this system — do not economise on it.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ---- Spacing scale (8px base) ---- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   16px;
  --space-4:   24px;
  --space-5:   32px;
  --space-6:   48px;
  --space-7:   64px;
  --space-8:   80px;
  --space-9:   96px;
  --space-10: 120px;
  --space-11: 160px;

  /* ---- Section rhythm ---- */
  --section-py:        clamp(64px, 9vw, 120px); /* @kind spacing */ /* vertical breathing */
  --section-py-tight:  clamp(48px, 6vw, 80px); /* @kind spacing */

  /* ---- Container / editorial grid ---- */
  --container-max:   1360px;   /* content width 1280–1400 */
  --container-wide:  1560px;
  --gutter:          clamp(20px, 5vw, 64px); /* @kind spacing */  /* wide side margins */
  --grid-columns:    12; /* @kind other */
  --grid-gap:        var(--space-5);

  /* ---- Radii — architectural, near-zero, consistent everywhere ---- */
  --radius-0:    0px;
  --radius-sm:   2px;
  --radius-md:   4px;   /* button / input / card ceiling */
  --radius:      var(--radius-sm);  /* global default */

  /* ---- Borders — thin, warm, discreet ---- */
  --border-hairline: 1px;
  --border-width:    1px;

  /* ---- Shadow — essentially none; imagery carries depth ---- */
  --shadow-none: none;
  --shadow-soft: 0 1px 2px rgba(32, 30, 27, 0.04);  /* rare, whisper */

  /* ---- Motion — slow, calm, no bounce ---- */
  --ease:        cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:    180ms; /* @kind other */
  --dur:         320ms; /* @kind other */
  --dur-slow:    600ms; /* @kind other */
}

/* Layout helper: editorial container */
.zd-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.zd-section { padding-block: var(--section-py); }