/* ============================================================
   EFFECTS — radius, shadow, borders, motion
   Tight corners + soft warm shadows. Editorial, not bubbly.
   ============================================================ */

:root {
  /* ---- Radius ---- */
  --radius-xs:  3px;
  --radius-sm:  5px;
  --radius-md:  9px;
  --radius-lg:  14px;
  --radius-xl:  22px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--color-hairline);
  --border-default:  1px solid var(--color-border);
  --border-strong:   1.5px solid var(--color-border-strong);
  --border-ink:      1.5px solid var(--ink-900);

  /* ---- Shadows (warm-tinted, low-spread, editorial) ---- */
  --shadow-xs: 0 1px 2px rgba(33, 30, 24, 0.06);
  --shadow-sm: 0 1px 3px rgba(33, 30, 24, 0.08), 0 1px 2px rgba(33, 30, 24, 0.04);
  --shadow-md: 0 6px 18px rgba(33, 30, 24, 0.08), 0 2px 6px rgba(33, 30, 24, 0.05);
  --shadow-lg: 0 16px 40px rgba(33, 30, 24, 0.12), 0 4px 12px rgba(33, 30, 24, 0.06);
  --shadow-accent: 0 8px 24px rgba(168, 64, 31, 0.22);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
  --transition-base: all var(--dur-base) var(--ease-out); /* @kind other */
}