/* ============================================================
   SPACING, RADII & ELEVATION — Deep Espresso Editorial
   Fixed-grid, editorial breathing room. Depth via tonal layers
   and hairline outlines — NOT shadows or blur.
   ============================================================ */

:root {
  /* ---- Spacing scale ---- */
  --space-stack-sm: 8px;
  --space-stack-md: 16px;
  --space-stack-lg: 32px;
  --space-gutter: 24px;
  --space-section-gap: 128px;

  /* ---- Page framing ---- */
  --page-margin: 64px;          /* desktop global margin */
  --page-margin-mobile: 20px;   /* mobile global margin */

  /* ---- Corner radii — "Soft-Technical", subtle 4px ---- */
  --radius-sm: 0.125rem;   /* 2px */
  --radius: 0.25rem;       /* 4px — DEFAULT */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  /* NOTE: avoid pill / 9999px on UI elements — keep the editorial structure */
  --radius-full: 9999px;

  /* ---- Borders ---- */
  --border-width: 1px;

  /* ---- Motion — snappy, technical ---- */
  --transition-fast: 150ms; /* @kind other */
  --ease: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
}