/* Continuous corners are an explicit choice on a surface, not a page-wide
   default. Unmarked controls and unsupported browsers keep their original
   circular border-radius. Components own the radius and its round fallback;
   the study resets the active aliases to compare the original geometry. */
@layer base {
  :root {
    --weaver-squircle-panel: clamp(30px, 3vw, 48px);
    --weaver-squircle-nav: clamp(24px, 2.35vw, 34px);
    --weaver-squircle-menu: 24px;
    --weaver-squircle-tile: 1.125rem;
  }

  /* Preserve the original phone UI and floating-card shapes, including any
     future explicitly marked surfaces inside these demonstrations. */
  :where(.showcase-hero-phone, .iphone-shell, .phone-screen-surface) {
    --weaver-corner-shape: round;
    --weaver-panel-radius: initial;
    --weaver-nav-radius: initial;
    --weaver-menu-radius: initial;
    --weaver-tile-radius: initial;
  }

  @supports (corner-shape: squircle) {
    :root {
      --weaver-panel-radius: var(--weaver-squircle-panel);
      --weaver-nav-radius: var(--weaver-squircle-nav);
      --weaver-menu-radius: var(--weaver-squircle-menu);
      --weaver-tile-radius: var(--weaver-squircle-tile);
    }

    :where([data-corner-shape="squircle"]) {
      corner-shape: var(--weaver-corner-shape, squircle);
    }
    /* Painted surface layers must follow their opted-in parent. This does
       not pass the shape to nested fields, buttons or other children. */
    :where([data-corner-shape="squircle"])::before,
    :where([data-corner-shape="squircle"])::after {
      corner-shape: inherit;
    }
    :where(.rounded-full, [data-corner-shape="round"]) { corner-shape: round; }
  }
}