:root {
  --clr-background: 0deg 0% 95%;
  --clr-background-shade: 0deg 0% 85%;
  --clr-content: 0deg 100% 100%;
  --clr-content-shade: 0deg 100% 100%;

  --clr-shadow: 0deg 100% 0%;

  --clr-primary: 4.3deg 69.3% 47.3%;
  --clr-primary-shade: 4deg 83% 36%;
  --clr-secondary: 0deg 100% 100%;
  --clr-secondary-shade: 0deg 0% 95%;
  --clr-basic: 0deg 0% 95%;
  --clr-critical: 354deg 80% 25%;
  --clr-danger: 354deg 70% 54%;
  --clr-success: 152deg 69% 31%;
  --clr-warning: 45deg 100% 51%;

  --clr-black: 0deg 0% 0%;
  --clr-white: white;
  --clr-text: hsl(var(--clr-black));

  --border: 2px;
  --border-l: 4px;
  --element-size: 3em;
  --element-size-s: 1.5em;
  --radius: 5px;
  --spacing: 1em;
  --spacing-l: 2em;
  --spacing-s: 0.5em;
  --text-l: 1.2em;
  --text-s: 0.8em;

  --t-background-color: background-color 250ms;
  --t-background-image: background-image 250ms;

  --grid-layout: 1fr 1fr 2fr;
  --shadow: 0 5px 10px 0 hsl(var(--clr-shadow) / 0.1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --clr-background: 0deg 0% 5%;
    --clr-background-shade: 0deg 0% 85%;
    --clr-content: 0deg 0% 10%;
    --clr-content-shade: 0deg 0% 20%;

    --clr-shadow: 0deg 100% 0%;

    --clr-background: 0deg 0% 5%;
    --clr-background-shade: 0deg 0% 85%;
    --clr-content: 0deg 0% 12%;
  
    --clr-primary: 4.3deg 69.3% 47.3%;
    --clr-primary-shade: 4deg 83% 36%;
    --clr-secondary: 0deg 0% 12%;
    --clr-secondary-shade: 0deg 0% 5%;
    --clr-basic: 0deg 0% 5%;

    --clr-black: 0deg 0% 60%;
    --clr-text: hsl(var(--clr-black));
  }
}