/* 149 — Radii, shadows, borders, motion
   The brand is discreet and structured: corners are near-square (not the
   soft, bubbly rounding of generic SaaS), shadows are faint and low, and
   motion is a quiet, single easing curve — no bounce, no overshoot.
*/
:root {
  --radius-none: 0px;
  --radius-sm: 2px;   /* inputs, small chips */
  --radius-md: 4px;   /* buttons, cards */
  --radius-lg: 8px;   /* large media frames */
  --radius-pill: 999px; /* tags only */

  --border-hairline: 1px solid var(--color-border);
  --border-hairline-dark: 1px solid var(--color-border-dark);
  --border-width-focus: 2px;

  --shadow-sm: 0 1px 2px rgba(4, 15, 33, 0.06);
  --shadow-md: 0 4px 16px rgba(4, 15, 33, 0.08);
  --shadow-lg: 0 12px 32px rgba(4, 15, 33, 0.12);

  --ease-quiet: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-normal: 220ms; /* @kind other */
  --duration-slow: 400ms; /* @kind other */
}