/* ═══════════════════════════════════════════════════════════════════════════
 * M3E Shape Tokens & Utility Classes
 * Reference: docs/m3e/guidelines/shape.md
 *
 * 7 shape scale tokens: none → full.
 * All four corners use the same radius (M3E rounded-only).
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
}

.m3e-shape-none { border-radius: var(--md-sys-shape-corner-none); }
.m3e-shape-extra-small { border-radius: var(--md-sys-shape-corner-extra-small); }
.m3e-shape-small { border-radius: var(--md-sys-shape-corner-small); }
.m3e-shape-medium { border-radius: var(--md-sys-shape-corner-medium); }
.m3e-shape-large { border-radius: var(--md-sys-shape-corner-large); }
.m3e-shape-extra-large { border-radius: var(--md-sys-shape-corner-extra-large); }
.m3e-shape-full { border-radius: var(--md-sys-shape-corner-full); }

/* Partial rounding helpers (text fields: top only, bottom sheets: top only) */
.m3e-shape-top-extra-small {
  border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
}
.m3e-shape-top-extra-large {
  border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
}