:root{
  /* Sharp edges are the default. Radii exist only for pills/inputs. */
  --radius-none:0;
  --radius-sm:2px;
  --radius-pill:999px;

  /* the five-colour recognition bar */
  --colorbar-height:8px; /* @kind spacing */
  --colorbar-height-lg:14px; /* @kind spacing */
  --colorbar-stops:var(--vhs-red) 0 20%,var(--vhs-turquoise) 20% 40%,var(--vhs-purple) 40% 60%,var(--vhs-yellowgreen) 60% 80%,var(--vhs-grey) 80% 100%; /* @kind other */
  --colorbar:linear-gradient(to right,var(--colorbar-stops)); /* @kind other */

  /* diagonal cuts (Programmheft covers) */
  --diagonal-angle:18deg; /* @kind other */
  --clip-diagonal-down:polygon(0 0,100% 0,100% 62%,0 100%); /* @kind other */
  --clip-diagonal-up:polygon(0 38%,100% 0,100% 100%,0 100%); /* @kind other */
  --clip-triangle-tr:polygon(100% 0,100% 100%,0 0); /* @kind other */
  --clip-triangle-br:polygon(100% 0,100% 100%,0 100%); /* @kind other */

  /* the system has no shadow language — depth comes from contrast */
  --shadow-none:none;
  --shadow-overlay:0 24px 64px rgba(0,0,0,.28);
  --scrim:rgba(0,0,0,.62); /* @kind color */

  --hairline:var(--border-width) solid var(--border-hairline); /* @kind other */
  --hairline-quiet:var(--border-width) solid var(--border-quiet); /* @kind other */
  --rule-strong:var(--border-width-strong) solid var(--vhs-black); /* @kind other */
}