/* ============================================================
   MatterMake — Spacing, layout, line & shadow
   The identity is architectural: generous margins, content
   pushed toward the page edges, a measured column grid, and
   negative space treated as material. Corners are essentially
   square. Lines do the work that shadows do elsewhere.
   ============================================================ */

:root {
  /* --- Spacing scale (4px base) --- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* --- Layout --- */
  --measure: 64ch;             /* ideal body line length */
  --page-margin: 6rem;         /* generous outer margin */
  --page-margin-sm: 1.5rem;
  --grid-columns: 12; /* @kind other */
  --grid-gutter: 1.5rem;
  --container-max: 1440px;

  /* --- Radii (near-square; the brand resists roundness) --- */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 3px;        /* default for inputs / small controls */
  --radius-pill: 999px;    /* reserved for tags / avatars only */

  /* --- Border / line --- */
  --line: 1px;
  --line-bold: 2px;
  --line-rule: 1px solid var(--ink);
  --line-soft: 1px solid var(--grey-300);

  /* --- Shadow: used sparingly. Lines first, elevation last. --- */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);

  /* --- Motion: quiet, precise. No bounce. --- */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */

  /* --- Z layers --- */
  --z-base: 0; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-overlay: 800; /* @kind other */
  --z-modal: 900; /* @kind other */
  --z-toast: 1000; /* @kind other */
}