custom properties ordering

ordering-custom-properties.css

:root {
  /* CONSTANTS on top */
  --COLOR-PRIMARY: palevioletred;
  --COLOR-GRAY: silver;
  
  /* Regular custom properties */
  --heading-color: var(--COLOR-GRAY);
}
h1 {
  /* Custom properties without calc */
  --heading-color: var(--COLOR-PRIMARY); /* Value is overridden */
  
  /* Custom properties with calc */
  --heading-padding-bottom: calc(var(--padding) * 1em);
  
  /* Properties that rely on other custom properties */
  color: var(--heading-color);
  
  /* Regular properties with CSS values */
  text-decoration: underline;
}

button {
  --button-scale-pc--hover: 25%;
}