How to Use CSS Variables for Flexible and Maintainable Web Design

:root {
 /* Colors */
 //*the color variables below uses HSL// 
//*H = Hue, S = Saturdation. L = Lightness //

//* HSL Primary */
//Primary Brand Color//
  --color-primary-h: ;
  --color-primary-s: ;
  --color-primary-l: ;
  --color-primary-hsl: var(--color-primary-h) var(--color-primary-s) var(--color-primary-l);
  --color-primary: hsl(var(--color-primary-hsl));
  
  /* HSL Secondary */ //
  //Secondary Brand Color//
  --color-secondary-h: ;
  --color-secondary-s: ;
  --color-secondary-l: ;
  --color-secondary-hsl: var(--color-secondary-h) var(--color-secondary-s) var(--color-secondary-l);
  --color-secondary: hsl(var(--color-secondary-hsl));
  
  /* HSL Base */
  //*Base of the website//
  --color-base-h: ;
  --color-base-s: ;
  --color-base-l: ;
  --color-base-hsl: var(--color-base-h) var(--color-base-s) var(--color-base-l);
  --color-base: hsl(var(--color-base-hsl));
  --color-base-medium: hsl(var(--color-base-h) var(--color-base-s) var(--color-base-l));
  
    /* HSL Light Color */
  --color-light-h: ;
  --color-light-s: ;
  --color-light-l: ;
  --color-light-hsl: var(--color-light-h) var(--color-light-s) var(--color-light-l);
  --color-light: hsl(var(--color-light-hsl));
   
   /* HSL Dark Color */
  --color-dark-h: ;
  --color-dark-s: ;
  --color-dark-l: ;
  --color-dark-hsl: var(--color-dark-h) var(--color-dark-s) var(--color-dark-l);
  --color-dark: hsl(var(--color-dark-hsl));
  
  /* Action */ 
  //*Buttons, link and CTA background//
  --color-action-h: ;
  --color-action-s: ;
  --color-action-l: ;
  --color-action-hsl: var(--color-action-h) var(--color-action-s) var(--color-action-l);
  --color-action: hsl(var(--color-action-hsl));
  
  
  /* Text */
  --text-color: #333333; /* Set the default text color */
  --text-color-secondary: #666666; /* Set a secondary text color */
  --text-color-tertiary: #999999; /* Set a tertiary text color */

  /* Fonts */
  --font-family: Arial, sans-serif;
  --font-size-xs: ;
  --font-size-sm: ;
  --font-size-md: ;
  --font-size-lg: ;
  --font-size-xl: ;

  /* Gaps (Margins/Paddings) *///Use Cal Function with minmax//
  --gap-xs: ;
  --gap-sm: ;
  --gap-md: ;
  --gap-lg: ;
  --gap-xl: ;

  /* Paddings */ //Use Cal Function with minmax//
  --padding-section-block: ;
  --padding-section-inline: ;
  --padding-grid-block: ;
  --padding-grid-inline: ;
  --padding-header-inline: ;
  --padding-header-block: ;
  --padding-footer-inline: ;
  --padding-footer-block: ;

  /* Borders *///Use Cal Function with minmax//
  --border-width: ;
  --border-color: ;
  --border-radius-circle: ; /* Create a circle with border-radius using 50% */
  --border-radius-regular:; /* Regular border radius */

  /* Box Shadow */
  --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

  /* Buttons *///Use Cal Function with minmax//
  --button-radius: ;
  --button-font-family: var(--font-family);

  /* Button 1 */
  --button-1-color: var(--text-color);
  --button-1-background-color: var(--primary-color);

  /* Button 2 */
  --button-2-color: var(--text-color);
  --button-2-background-color: var(--secondary-color);

  /* Button 3 */
  --button-3-color: var(--text-color);
  --button-3-background-color: var(--tertiary-color);
}

/* Media Queries */
@media screen and (max-width: 768px) {
  :root {
    /* Adjust variables for smaller screens */
  }
}

/* Breakpoints */
@media screen and (max-width: 576px) {
  /* Adjust variables for extra small screens */
}

@media screen and (min-width: 577px) and (max-width: 768px) {
  /* Adjust variables for small screens */
}

@media screen and (min-width: 769px) and (max-width: 992px) {
  /* Adjust variables for medium screens */
}

@media screen and (min-width: 993px) {
  /* Adjust variables for large screens */
}

/* Classes */
.bg-primary {
  background-color: var(--color-primary);
}

.bg-base {
  background-color: var(--color-base);
}

.bg-action {
  background-color: var(--color-action);
}

.text-primary {
  color: var(--color-primary);
}

.text-base-medium {
  color: var(--color-base-medium);
}