/* ============================================================
   schels · Spacing, radius, border, shadow, layout
   ------------------------------------------------------------
   The system is flat and architectural: hard edges, hairline
   borders, almost no shadow. Corners are square by default;
   only the soft note-boxes and pills round. Depth comes from
   the black/white contrast, not from elevation.
   ============================================================ */

:root {
  /* ---- Spacing (4px base grid) -------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Radius (square by default) ----------------------- */
  --radius-none: 0;        /* CTA buttons, banners, diagram boxes   */
  --radius-sm:   2px;      /* inputs, checklist rows                */
  --radius-md:   6px;      /* cards                                 */
  --radius-lg:   10px;     /* soft note / hint boxes                */
  --radius-xl:   16px;
  --radius-full: 999px;    /* pills, avatars, switch                */

  /* ---- Border ------------------------------------------- */
  --border-hairline: 1px;
  --border-medium:   1.5px; /* the signature hard CTA outline       */
  --border-thick:    2px;

  /* ---- Shadow (used rarely — prefer borders) ------------ */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-overlay: 0 24px 60px rgba(0, 0, 0, 0.18);

  /* ---- Stroke (line-icons + diagram lines) -------------- */
  --stroke-icon: 1.5px;     /* thin rounded-cap line icons          */
  --stroke-diagram: 2px;    /* isometric diagram edges              */

  /* ---- Layout ------------------------------------------- */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1100px;
  --container-xl: 1320px;
  --gutter: var(--space-6);

  /* Social formats the practice publishes in */
  --canvas-square: 1080px;   /* Instagram post / carousel            */
  --canvas-story:  1350px;   /* portrait 4:5                         */

  /* ---- Motion ------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}