simple-custom-properties-naming-convention.css

:element {
  --[?specificity]-[context]-[?unit]--[?modifier]: 2rem;

  /* Examples */
  /* constants: */
  --PADDING-REM: 1rem;
  --COLOR-PRIMARY: palevioletred;
  --COLOR-SECONDARY: papayawhip;
  --COLOR-FOREGROUND: darkgray;
  --COLOR-BACKGROUND: snow;
    /* with modifier (--HOVER) */
  --COLOR--HOVER: var(--COLOR-SECONDARY, silver);
}

button {
  --button-color-background: var(--COLOR-FOREGROUND);
  --button-color-foreground: var(--COLOR-BACKGROUND);
  
  /* Dynamic variable with specificity, context and modifier */
  --button-padding-rem--large: calc(var(--PADDING) / 2) calc(var(--PADDING));
  
  /* have regular properties after the custom properties */
  background-color: var(--button-color-background);
  foreground: var(--button-color-background);
}
    button:hover {
      --button-color-background: var(--COLOR--HOVER);
    }
    
    button.default {
      --button-color-background: var(--COLOR-SECONDARY);
    }