/* Dalby Studio — Spacing, radii, borders, shadows, layout
   Architectural restraint: a 4px grid, near-square corners, and hairline
   ink borders preferred over heavy shadows. */

:root {
  /* ---- Spacing (4px base) ---------------------------------------- */
  --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;

  /* ---- Radii (kept sharp — this is a drawing-sheet brand) -------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   8px;
  --radius-pill: 999px;   /* tags / status chips only */

  /* ---- Borders --------------------------------------------------- */
  --border-w:     1px;
  --border-w-2:   1.5px;
  --rule-ink:     var(--border-w) solid var(--ink-900);
  --rule-hair:    var(--border-w) solid var(--border-hairline);

  /* ---- Shadows (sparing, warm-tinted) ---------------------------- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(21, 18, 11, 0.06);
  --shadow-md:   0 2px 8px rgba(21, 18, 11, 0.08), 0 1px 2px rgba(21, 18, 11, 0.06);
  --shadow-lg:   0 12px 32px rgba(21, 18, 11, 0.12), 0 2px 6px rgba(21, 18, 11, 0.06);
  --shadow-amber: 0 8px 24px rgba(245, 184, 0, 0.28);

  /* ---- Motion (calm, no bounce) ---------------------------------- */
  --ease:        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:    120ms; /* @kind other */
  --dur:         200ms; /* @kind other */
  --dur-slow:    340ms; /* @kind other */

  /* ---- Layout ---------------------------------------------------- */
  --measure:      66ch; /* @kind other */    /* ideal reading width */
  --container:    1180px; /* @kind spacing */
  --container-wide: 1380px; /* @kind spacing */
  --gutter:       clamp(20px, 5vw, 64px); /* @kind spacing */
}

::selection { background: var(--selection-bg); color: var(--ink-900); }