:root{
  /* Corners: the brand is angular. Squared by default, hexagon cuts for accents,
     small radii only on interactive controls. */
  --radius-none:0;
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:6px;
  --radius-pill:999px;

  /* Shadows are used sparingly — print-first brand. */
  --shadow-none:none;
  --shadow-card:0 1px 2px rgba(18,16,46,.06),0 8px 24px rgba(18,16,46,.08);
  --shadow-raised:0 2px 4px rgba(18,16,46,.08),0 18px 40px rgba(18,16,46,.14);
  --shadow-inset-hairline:inset 0 0 0 1px var(--border-hairline);

  --border-w:1px;
  --border-w-accent:3px;   /* left/top accent bars use the brand gradient, not a flat colour */

  /* Hexagon clip used for image masks and icon tiles.
     Brand hexagon: vertex top and bottom, flat left/right edges — as in the mark.
     Pair with aspect-ratio:.866 (regular hexagon) so it never stretches. */
  --clip-hex:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); /* @kind other */
  --hex-ratio:.866; /* @kind other */
  --clip-cut-corner:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%); /* @kind other */
}