/* ============================================================
   TEND — SPACING, GRID, RADIUS, SHADOW, MOTION TOKENS
   Layout discipline: 6-column grid, generous margins
   (22–28 mm portrait), quiet line-based structure.
   ============================================================ */

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

  /* ---- A4 portrait page (print geometry, in mm) ---- */
  --page-w: 210mm;           /* @kind spacing */
  --page-h: 297mm;           /* @kind spacing */
  --page-margin: 24mm;       /* within the 22–28mm band @kind spacing */
  --page-margin-wide: 28mm;  /* @kind spacing */
  --grid-columns: 6;         /* @kind other */
  --grid-gutter: 6mm;        /* @kind spacing */

  /* ---- Radius — TEND is restrained. Corners are nearly square. ---- */
  --r-none: 0;   /* @kind radius */
  --r-xs: 2px;   /* chips, swatches */
  --r-sm: 4px;   /* inputs, small cards */
  --r-md: 6px;   /* cards, dialogs */
  --r-lg: 10px;  /* large surfaces */
  --r-pill: 999px;

  /* ---- Borders ---- */
  --border-hair: 1px solid var(--rule);
  --border-rule: 1px solid var(--rule-strong);

  /* ---- Shadows — soft, warm, low. No coloured glows. ---- */
  --shadow-xs: 0 1px 2px rgba(42, 38, 34, 0.06);
  --shadow-sm: 0 2px 6px rgba(42, 38, 34, 0.07);
  --shadow-md: 0 6px 20px rgba(42, 38, 34, 0.09);
  --shadow-lg: 0 18px 48px rgba(42, 38, 34, 0.12);

  /* ---- Motion — calm. Short, eased, no bounce. ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 3px rgba(47, 158, 201, 0.45); /* @kind shadow */
}