/* Overse — Radius tokens
 *
 * SIGNATURE SHAPE: the "leaf". Two diagonal corners (top-left + bottom-right)
 * are rounded much more than the other two, giving buttons, cards and image
 * frames a soft, organic, asymmetric silhouette — the most recognisable
 * Overse visual cue. border-radius order is: top-left top-right bottom-right
 * bottom-left.
 *
 * Use --radius-leaf-* on the TL/BR diagonal; --radius-leaf-alt-* mirrors it to
 * the TR/BL diagonal (handy for alternating a row of cards).
 */

:root {
  /* Symmetric radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Signature asymmetric "leaf" — TL + BR rounded, the other two nearly square.
   * A rectangle with two softened corners, NOT an oval. Kept restrained. */
  --radius-leaf-sm: 8px 2px 8px 2px;
  --radius-leaf: 12px 3px 12px 3px;
  --radius-leaf-lg: 16px 4px 16px 4px;
  --radius-leaf-xl: 22px 6px 22px 6px;
  --radius-leaf-2xl: 30px 8px 30px 8px;

  /* Mirrored leaf — TR + BL rounded */
  --radius-leaf-alt-sm: 2px 8px 2px 8px;
  --radius-leaf-alt: 3px 12px 3px 12px;
  --radius-leaf-alt-lg: 4px 16px 4px 16px;
  --radius-leaf-alt-xl: 6px 22px 6px 22px;

  /* Semantic */
  --radius-button: var(--radius-leaf);     /* all buttons use the leaf */
  --radius-button-leaf: var(--radius-leaf);
  --radius-input: var(--radius-leaf-sm);
  --radius-card: var(--radius-leaf-lg);
  --radius-media: var(--radius-leaf-xl);
  --radius-chip: var(--radius-pill);
}