/* Corner radii, brand container shapes and shadows.
   The brand's signature container is not a rounded rectangle but an ARCH —
   see assets/shapes/brand-shapes-sheet.svg (arch, dome, onion-dome, hexagon,
   battlement). Use --arch-* radii or the ArchFrame component for imagery. */
:root{
  --radius-none:0;
  --radius-xs:2px; --radius-sm:4px; --radius-md:8px; --radius-lg:12px;
  --radius-xl:16px; --radius-2xl:24px; --radius-pill:999px;

  /* Arch container radii (top-only, generous) */
  --arch-radius:50% 50% 0 0 / 34% 34% 0 0; /* @kind radius */
  --arch-radius-tall:50% 50% 0 0 / 55% 55% 0 0; /* @kind radius */
  --arch-radius-soft:44% 44% 6% 6% / 30% 30% 4% 4%; /* @kind radius */

  --border-hair:1px;
  --border-thick:2px;
  --border-rule:3px;   /* gold rule under headers */

  --shadow-none:none;
  --shadow-xs:0 1px 2px color-mix(in oklab, var(--mohu-black) 8%, transparent);
  --shadow-sm:0 2px 6px color-mix(in oklab, var(--mohu-black) 8%, transparent);
  --shadow-md:0 6px 18px color-mix(in oklab, var(--mohu-black) 10%, transparent);
  --shadow-lg:0 16px 40px color-mix(in oklab, var(--mohu-black) 14%, transparent);
  --shadow-inset-hair:inset 0 0 0 1px var(--mohu-mist);

  /* Protection gradient for text over photography */
  --scrim-bottom:linear-gradient(to top, color-mix(in oklab, var(--mohu-black) 82%, transparent) 0%, color-mix(in oklab, var(--mohu-black) 40%, transparent) 45%, transparent 100%); /* @kind other */
  --scrim-side:linear-gradient(to left, color-mix(in oklab, var(--mohu-black) 78%, transparent) 0%, transparent 70%); /* @kind other */
  --glass-blur:blur(14px) saturate(1.1); /* @kind other */
}