/* MA Anna — Spacing, radius, layout, motion tokens. 8px base grid. */

:root {
  /* ── Spacing scale ──────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 88px;
  --space-10: 120px;
  --space-11: 160px;
  --space-12: 180px;

  /* ── Radius ─────────────────────────────────────── */
  --radius-sm:   12px;   /* small non-interactive blocks */
  --radius-md:   20px;   /* cards, popup inner blocks, test options */
  --radius-lg:   32px;   /* large atmospheric cards, popups, glass containers */
  --radius-pill: 999px;  /* buttons, nav, inputs, badges, pills */

  /* ── Containers ─────────────────────────────────── */
  --container-main:   1320px;
  --container-wide:   1440px;
  --container-narrow: 720px;
  --container-pad:    clamp(20px, 4vw, 64px);

  /* ── Section rhythm ─────────────────────────────── */
  --section-y-desktop: clamp(120px, 12vw, 180px); /* @kind spacing */
  --section-y-tablet:  clamp(88px, 10vw, 120px);  /* @kind spacing */
  --section-y-mobile:  clamp(64px, 14vw, 88px);   /* @kind spacing */

  /* ── Motion ─────────────────────────────────────── */
  --ease-soft:      cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur-hover:      300ms; /* @kind other */
  --dur-reveal:     900ms; /* @kind other */
}