/* Soft & simple shapes: ONE 4px radius, plus circles. No pills, no blobs. */
:root{
  --radius-none:0px;
  --radius-default:4px;
  --radius-rounded:50%;

  --border-width-default:1px;
  --border-width-strong:2px;
  --border-style-default:solid; /* @kind other */
  --border-style-dashed:dashed; /* @kind other */ /* sparingly: dividing related items, "add" affordances */

  /* Flat design: shadow only when a component must stand out. Two levels, no more. */
  --shadow-none:none;
  --shadow-close:0 1px 4px var(--color-shadow);
  --shadow-far:0 4px 16px var(--color-shadow);

  /* Focus-visible ring (purple 900) */
  --focus-ring:0 0 0 2px var(--outline-focus); /* @kind shadow */

  --opacity-pressed:.9; /* @kind other */ /* React Native pressed state only */
}