.cl-components-dark-theme {
  // Colors
  --cl-primary-color: hsl(57, 64%, 74%);
  --cl-tint-color: hsl(43, 87%, 66%);
  --cl-accent-color: hsl(23, 72%, 53%);
  --cl-primary-background: hsl(328, 19%, 15%);
  --cl-highlight-background: hsl(24, 55%, 34%);
  --cl-shadow-background: hsla(24, 55%, 34%, 0.3);
  // Gradients
  --cl-accent-gradient: linear-gradient(to left, hsl(23, 72%, 26%) 0%, hsl(23, 72%, 30%) 8%, hsl(23, 72%, 30%) 92%, hsl(23, 72%, 26%) 100%);
  --cl-shadow-gradient: linear-gradient(
    to left,
    hsl(328, 19%, 24%) 0%,
    hsl(328, 19%, 30%) 8%,
    hsl(328, 19%, 30%) 92%,
    hsl(328, 19%, 24%) 100%
  );
  // Shadows
  --cl-box-shadow: hsla(24, 55%, 34%, 0.15) 2.4px 2.4px 3.2px;
  --cl-text-shadow: 2.4px 2.4px 3.2px hsla(43, 87%, 66%, 0.3);
  --cl-drop-shadow: drop-shadow(2.4px 2.4px 3.2px hsla(24, 55%, 34%, 0.15));
  // Borders
  --cl-primary-border: 1px solid hsla(57, 64%, 74%, 32%);
  --cl-light-border: 1px solid hsl(43, 87%, 66%, 32%);
  --cl-accent-border: 1px solid hsl(23, 72%, 53%);
  --cl-outline-border: 1px solid hsl(43, 87%, 66%);
}
