/* ============================================================
   Shape — Material 3 Expressive corners + shape library
   ------------------------------------------------------------
   Corner radius scale comes from the Shape Variable collection
   (materialized into fig-tokens.css as unitless floats). Here we
   expose px-unit semantic aliases plus a handful of the M3E
   expressive "shape library" silhouettes as clip-paths for use in
   shape-morph transitions.
   ============================================================ */

:root {
  /* Corner radius (px aliases over the unitless Shape tokens) */
  --md-sys-shape-corner-none: calc(var(--corner-none) * 1px);            /* 0 */
  --md-sys-shape-corner-extra-small: calc(var(--corner-extra-small) * 1px); /* 4 */
  --md-sys-shape-corner-small: calc(var(--corner-small) * 1px);          /* 8 */
  --md-sys-shape-corner-medium: calc(var(--corner-medium) * 1px);        /* 12 */
  --md-sys-shape-corner-large: calc(var(--corner-large) * 1px);          /* 16 */
  --md-sys-shape-corner-large-increased: calc(var(--corner-large-increased) * 1px); /* 20 */
  --md-sys-shape-corner-extra-large: calc(var(--corner-extra-large) * 1px); /* 28 */
  --md-sys-shape-corner-extra-large-increased: calc(var(--corner-extra-large-increased) * 1px); /* 32 */
  --md-sys-shape-corner-extra-extra-large: calc(var(--corner-extra-extra-large) * 1px); /* 48 */
  --md-sys-shape-corner-full: calc(var(--corner-full) * 1px);            /* 1000 -> pill */

  /* A few expressive silhouettes from the M3E shape library
     (approximated as clip-paths for shape-morph demos). */
  --md-shape-squircle: polygon(
    50% 0%, 66% 3%, 79% 11%, 89% 21%, 97% 34%, 100% 50%, 97% 66%,
    89% 79%, 79% 89%, 66% 97%, 50% 100%, 34% 97%, 21% 89%, 11% 79%,
    3% 66%, 0% 50%, 3% 34%, 11% 21%, 21% 11%, 34% 3%); /* @kind other */
  --md-shape-pill: inset(0 round var(--md-sys-shape-corner-full)); /* @kind other */
  --md-shape-cookie: polygon(
    50% 0, 61% 12%, 79% 7%, 82% 26%, 100% 32%, 90% 50%, 100% 68%,
    82% 74%, 79% 93%, 61% 88%, 50% 100%, 39% 88%, 21% 93%, 18% 74%,
    0 68%, 10% 50%, 0 32%, 18% 26%, 21% 7%, 39% 12%); /* @kind other */
}

/* Expressive press: morph the corner radius on active. Attach
   .md-shape-morph to any rounded surface. */
.md-shape-morph {
  transition: border-radius var(--md-sys-motion-spring-spatial-fast-duration)
    var(--md-sys-motion-spring-spatial-fast);
}
.md-shape-morph:active {
  border-radius: var(--md-sys-shape-corner-small);
}