/* Loopi Digital — space, radii, layout. 4px base grid; sections breathe at 96–160px. */
:root {
  --space-0: 0; /* @kind spacing */
  --space-1: 4px; /* @kind spacing */
  --space-2: 8px; /* @kind spacing */
  --space-3: 12px; /* @kind spacing */
  --space-4: 16px; /* @kind spacing */
  --space-5: 20px; /* @kind spacing */
  --space-6: 24px; /* @kind spacing */
  --space-7: 32px; /* @kind spacing */
  --space-8: 40px; /* @kind spacing */
  --space-9: 48px; /* @kind spacing */
  --space-10: 64px; /* @kind spacing */
  --space-11: 80px; /* @kind spacing */
  --space-12: 96px; /* @kind spacing */
  --space-13: 128px; /* @kind spacing */
  --space-14: 160px; /* @kind spacing */

  /* radii — Loopi is a soft-tech brand: superellipse-ish large radii, pills for actions */
  --r-xs: 6px; /* @kind radius */
  --r-sm: 10px; /* @kind radius */
  --r-md: 14px; /* @kind radius */
  --r-lg: 20px; /* @kind radius */
  --r-xl: 28px; /* @kind radius */
  --r-2xl: 36px; /* @kind radius */
  --r-3xl: 48px; /* @kind radius */
  --r-pill: 999px; /* @kind radius */
  --r-mark: 30%; /* the logo mark's squircle ratio */

  /* layout */
  --container-max: 1240px; /* @kind spacing */
  --container-wide: 1440px; /* @kind spacing */
  --container-prose: 68ch; /* @kind spacing */
  --gutter: var(--space-6); /* @kind spacing */
  --header-h: 72px; /* @kind spacing */
  --section-y: clamp(72px, 9vw, 160px); /* @kind spacing */

  --z-base: 0; /* @kind other */
  --z-raised: 10; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-overlay: 500; /* @kind other */
  --z-modal: 700; /* @kind other */
  --z-toast: 900; /* @kind other */
}