/**
 * ============================================================================
 * APPLE G² CONTINUOUS CURVATURE (SQUIRCLE) SYSTEM
 * ============================================================================
 * Implements Apple's continuous curvature (Superellipse Lamé curve |x/a|^n + |y/b|^n = 1)
 * Eliminates the abrupt curvature derivative jump of circular border-radius.
 * ============================================================================
 */

:root {
  --squircle-smooth-ratio: 0.60; /* Apple HIG default corner-smoothing */
  --squircle-r-sm: 16px;
  --squircle-r-md: 24px;
  --squircle-r-lg: 36px;
  --squircle-r-xl: 48px;
}

/* 
 * Concentric Radius Formula:
 * For a double-bezel card to look mathematically aligned at all angles,
 * the inner radius MUST be: R_inner = R_outer - Padding.
 * If R_inner == R_outer, the corner gap pinches and looks distorted.
 */
.concentric-bezel-wrapper {
  --bezel-pad: 6px;
  --bezel-outer-r: 36px;
  --bezel-inner-r: calc(var(--bezel-outer-r) - var(--bezel-pad));
  
  padding: var(--bezel-pad);
  border-radius: var(--bezel-outer-r);
}

.concentric-bezel-wrapper > .concentric-bezel-inner {
  border-radius: var(--bezel-inner-r);
}

/* SQUIRCLE UTILITY CLASSES */
.squircle-sm {
  border-radius: var(--squircle-r-sm);
  /* Curvature smoothing hint for supporting browsers */
  corner-smoothing: 60%;
}

.squircle-md {
  border-radius: var(--squircle-r-md);
  corner-smoothing: 60%;
}

.squircle-lg {
  border-radius: var(--squircle-r-lg);
  corner-smoothing: 60%;
}

.squircle-xl {
  border-radius: var(--squircle-r-xl);
  corner-smoothing: 60%;
}

.squircle-pill {
  border-radius: 9999px;
}