:root {
  /* ── Border Radius ─────────────────────────────────────────────────────────
     Banana uses near-flat geometry. Rarely rounds beyond 4px.             */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Borders ── */
  --border-thin:   1px solid var(--color-border);
  --border-strong: 1px solid var(--color-border-strong);
  --border-accent: 1px solid var(--color-border-accent);
  --border-white:  1px solid rgba(255,255,255,0.12); /* @kind other */

  /* ── Shadows (flat-first; shadows used sparingly) ── */
  --shadow-none:  none;
  --shadow-sm:    0 1px 4px  rgba(0,0,0,0.5);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.55);
  --shadow-lg:    0 12px 40px rgba(0,0,0,0.65);
  --shadow-yellow: 0 0 0 2px var(--yellow);

  /* ── Transitions ── */
  --transition-fast: 120ms ease; /* @kind other */
  --transition-base: 200ms ease; /* @kind other */
  --transition-slow: 350ms cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */

  /* ── Z-index ── */
  --z-below:    -1; /* @kind other */
  --z-base:      0; /* @kind other */
  --z-raised:   10; /* @kind other */
  --z-dropdown: 100; /* @kind other */
  --z-sticky:   200; /* @kind other */
  --z-modal:   1000; /* @kind other */
  --z-toast:   2000; /* @kind other */
}