/* ===========================================================================
   EFFECTS — radius, borders, shadows, motion
   =========================================================================== */

:root {
  /* --- Corner radius (intentionally small) ------------------------------ */
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 999px;

  /* --- Border widths ---------------------------------------------------- */
  --border-thin:  1px;
  --border-thick: 1.5px;

  /* --- Shadows (warm-tinted, low elevation) ----------------------------- */
  --shadow-xs: 0 1px 2px rgba(26, 22, 17, 0.05);
  --shadow-sm: 0 1px 3px rgba(26, 22, 17, 0.06), 0 1px 2px rgba(26, 22, 17, 0.04);
  --shadow-md: 0 2px 6px rgba(26, 22, 17, 0.07), 0 1px 2px rgba(26, 22, 17, 0.04);
  --shadow-lg: 0 10px 28px rgba(26, 22, 17, 0.10), 0 2px 6px rgba(26, 22, 17, 0.05);
  --shadow-inset: inset 0 1px 2px rgba(26, 22, 17, 0.06);

  /* --- Motion ----------------------------------------------------------- */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
}