/* ============================================================
   Xier — Effects: radii, borders, shadows, motion
   The brand is deliberately FLAT and SQUARE — sharp corners,
   1px hairline borders, almost no shadow. Depth comes from
   color blocks and borders, not blur.
   ============================================================ */
:root {
  /* Radii — sharp by default; a hair of softness reserved for
     large media blocks only. */
  --radius-0: 0px;     /* default: cards, buttons, inputs, tags */
  --radius-1: 2px;     /* subtle — chips, small inputs if desired */
  --radius-2: 4px;
  --radius-pill: 999px;/* used only for status dots / avatars */

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 2px;
  --border-hairline: var(--border-width) solid var(--color-border);
  --border-ink: var(--border-width) solid var(--color-border-strong);

  /* Shadows — used sparingly; the system favors flat blocks */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(28,25,22,.06);
  --shadow-md: 0 4px 16px rgba(28,25,22,.08);
  --shadow-lg: 0 12px 40px rgba(28,25,22,.12);

  /* Motion — single signature easing, carried from the source */
  --ease: cubic-bezier(0.55, 0, 0.1, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 0.2s; /* @kind other */
  --dur: 0.3s;      /* @kind other */
  --dur-slow: 0.6s; /* @kind other */

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--ground), 0 0 0 4px var(--color-focus); /* @kind shadow */
}