/* ============================================================
   Marginalia — Effects: radii, borders, shadows, motion
   The signature look is "drawn by hand on paper": soft warm
   shadows, generous rounding, and an optional organic radius
   that makes rectangles feel sketched rather than CAD-perfect.
   ============================================================ */
:root {
  /* --- Corner radii --- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   26px;
  --radius-pill: 999px;
  /* Signature "wobbly" radius — uneven corners, like a drawn box.
     Apply to cards/notes for the hand-made feel. */
  --radius-doodle: 14px 18px 13px 19px / 18px 13px 19px 14px;

  /* --- Borders --- */
  --border-w:        1.5px;   /* the inked outline weight */
  --border-w-bold:   2.5px;
  --stroke-ink:      var(--border-w) solid var(--ink-900);
  --stroke-soft:     1px solid var(--border-soft);

  /* --- Shadows (warm, low, paper lifting off the desk) --- */
  --shadow-xs: 0 1px 2px rgba(74, 60, 40, 0.10);
  --shadow-sm: 0 2px 6px rgba(74, 60, 40, 0.12);
  --shadow-md: 0 6px 16px -4px rgba(74, 60, 40, 0.18);
  --shadow-lg: 0 14px 34px -10px rgba(74, 60, 40, 0.26);
  /* "Lifted note" — offset like a card resting slightly askew */
  --shadow-note: 2px 4px 0 rgba(42, 38, 34, 0.10), 0 10px 24px -10px rgba(74, 60, 40, 0.22);
  --shadow-inset: inset 0 1px 3px rgba(74, 60, 40, 0.10);

  /* --- Motion (gentle, never bouncy/snappy) --- */
  --ease-soft:  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-base:   200ms;  /* @kind other */
  --dur-slow:   320ms;  /* @kind other */

  /* Interaction deltas */
  --press-scale: 0.97;  /* @kind other */
  --lift-y:      -2px;  /* @kind other */

  /* --- Paper texture wash (subtle speckle, layer under content) --- */
  --paper-grain:
    radial-gradient(rgba(140,120,90,0.05) 1px, transparent 1.4px) 0 0 / 7px 7px,
    radial-gradient(rgba(140,120,90,0.04) 1px, transparent 1.4px) 3px 4px / 9px 9px; /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;     /* @kind other */
    --dur-base: 0ms;     /* @kind other */
    --dur-slow: 0ms;     /* @kind other */
    --press-scale: 1;    /* @kind other */
    --lift-y: 0;         /* @kind other */
  }
}