:root {
  --neutral-grey: hsl(0 0 50%);
  --caribbean-sea: hsl(180 80% 45%);
  --summer-sky: hsl(210 85% 50%);
  --fresh-lavender: hsl(260 80% 55%);
  --tasty-raspberry: hsl(330 80% 50%);
  --juicy-orange: hsl(30 95% 50%);
  --golden-sun: hsl(50 95% 50%);

  /* Neutral Grey variants */
  --neutral-grey-80: color-mix(in oklch, var(--neutral-grey) 80%, light-dark(white, black));
  --neutral-grey-50: color-mix(in oklch, var(--neutral-grey) 50%, light-dark(white, black));
  --neutral-grey-10: color-mix(in oklch, var(--neutral-grey) 10%, light-dark(white, black));
  --neutral-grey-05: color-mix(in oklch, var(--neutral-grey) 5%, light-dark(white, black));

  --neutral-grey-o80: hsl(from var(--neutral-grey) h s l / 0.8);
  --neutral-grey-o50: hsl(from var(--neutral-grey) h s l / 0.5);
  --neutral-grey-o10: hsl(from var(--neutral-grey) h s l / 0.1);
  --neutral-grey-o05: hsl(from var(--neutral-grey) h s l / 0.05);

  --neutral-grey-l80: oklch(from var(--neutral-grey) 0.8 c h);
  --neutral-grey-l50: oklch(from var(--neutral-grey) 0.5 c h);
  --neutral-grey-l10: oklch(from var(--neutral-grey) 0.1 c h);
  --neutral-grey-l05: oklch(from var(--neutral-grey) 0.05 c h);

  /* Caribbean Sea variants */
  --caribbean-sea-80: color-mix(in oklch, var(--caribbean-sea) 80%, light-dark(white, black));
  --caribbean-sea-50: color-mix(in oklch, var(--caribbean-sea) 50%, light-dark(white, black));
  --caribbean-sea-10: color-mix(in oklch, var(--caribbean-sea) 10%, light-dark(white, black));
  --caribbean-sea-05: color-mix(in oklch, var(--caribbean-sea) 5%, light-dark(white, black));

  --caribbean-sea-o80: hsl(from var(--caribbean-sea) h s l / 0.8);
  --caribbean-sea-o50: hsl(from var(--caribbean-sea) h s l / 0.5);
  --caribbean-sea-o10: hsl(from var(--caribbean-sea) h s l / 0.1);
  --caribbean-sea-o05: hsl(from var(--caribbean-sea) h s l / 0.05);

  --caribbean-sea-l80: oklch(from var(--caribbean-sea) 0.8 c h);
  --caribbean-sea-l50: oklch(from var(--caribbean-sea) 0.5 c h);
  --caribbean-sea-l10: oklch(from var(--caribbean-sea) 0.1 c h);
  --caribbean-sea-l05: oklch(from var(--caribbean-sea) 0.05 c h);

  /* Summer Sky variants */
  --summer-sky-80: color-mix(in oklch, var(--summer-sky) 80%, light-dark(white, black));
  --summer-sky-50: color-mix(in oklch, var(--summer-sky) 50%, light-dark(white, black));
  --summer-sky-10: color-mix(in oklch, var(--summer-sky) 10%, light-dark(white, black));
  --summer-sky-05: color-mix(in oklch, var(--summer-sky) 5%, light-dark(white, black));

  --summer-sky-o80: hsl(from var(--summer-sky) h s l / 0.8);
  --summer-sky-o50: hsl(from var(--summer-sky) h s l / 0.5);
  --summer-sky-o10: hsl(from var(--summer-sky) h s l / 0.1);
  --summer-sky-o05: hsl(from var(--summer-sky) h s l / 0.05);

  --summer-sky-l80: oklch(from var(--summer-sky) 0.8 c h);
  --summer-sky-l50: oklch(from var(--summer-sky) 0.5 c h);
  --summer-sky-l10: oklch(from var(--summer-sky) 0.1 c h);
  --summer-sky-l05: oklch(from var(--summer-sky) 0.05 c h);

  /* Fresh Lavender variants */
  --fresh-lavender-80: color-mix(in oklch, var(--fresh-lavender) 80%, light-dark(white, black));
  --fresh-lavender-50: color-mix(in oklch, var(--fresh-lavender) 50%, light-dark(white, black));
  --fresh-lavender-10: color-mix(in oklch, var(--fresh-lavender) 10%, light-dark(white, black));
  --fresh-lavender-05: color-mix(in oklch, var(--fresh-lavender) 5%, light-dark(white, black));

  --fresh-lavender-o80: hsl(from var(--fresh-lavender) h s l / 0.8);
  --fresh-lavender-o50: hsl(from var(--fresh-lavender) h s l / 0.5);
  --fresh-lavender-o10: hsl(from var(--fresh-lavender) h s l / 0.1);
  --fresh-lavender-o05: hsl(from var(--fresh-lavender) h s l / 0.05);

  --fresh-lavender-l80: oklch(from var(--fresh-lavender) 0.8 c h);
  --fresh-lavender-l50: oklch(from var(--fresh-lavender) 0.5 c h);
  --fresh-lavender-l10: oklch(from var(--fresh-lavender) 0.1 c h);
  --fresh-lavender-l05: oklch(from var(--fresh-lavender) 0.05 c h);

  /* Tasty Raspberry variants */
  --tasty-raspberry-80: color-mix(in oklch, var(--tasty-raspberry) 80%, light-dark(white, black));
  --tasty-raspberry-50: color-mix(in oklch, var(--tasty-raspberry) 50%, light-dark(white, black));
  --tasty-raspberry-10: color-mix(in oklch, var(--tasty-raspberry) 10%, light-dark(white, black));
  --tasty-raspberry-05: color-mix(in oklch, var(--tasty-raspberry) 5%, light-dark(white, black));

  --tasty-raspberry-o80: hsl(from var(--tasty-raspberry) h s l / 0.8);
  --tasty-raspberry-o50: hsl(from var(--tasty-raspberry) h s l / 0.5);
  --tasty-raspberry-o10: hsl(from var(--tasty-raspberry) h s l / 0.1);
  --tasty-raspberry-o05: hsl(from var(--tasty-raspberry) h s l / 0.05);

  --tasty-raspberry-l80: oklch(from var(--tasty-raspberry) 0.8 c h);
  --tasty-raspberry-l50: oklch(from var(--tasty-raspberry) 0.5 c h);
  --tasty-raspberry-l10: oklch(from var(--tasty-raspberry) 0.1 c h);
  --tasty-raspberry-l05: oklch(from var(--tasty-raspberry) 0.05 c h);

  /* Juicy Orange variants */
  --juicy-orange-80: color-mix(in oklch, var(--juicy-orange) 80%, light-dark(white, black));
  --juicy-orange-50: color-mix(in oklch, var(--juicy-orange) 50%, light-dark(white, black));
  --juicy-orange-10: color-mix(in oklch, var(--juicy-orange) 10%, light-dark(white, black));
  --juicy-orange-05: color-mix(in oklch, var(--juicy-orange) 5%, light-dark(white, black));

  --juicy-orange-o80: hsl(from var(--juicy-orange) h s l / 0.8);
  --juicy-orange-o50: hsl(from var(--juicy-orange) h s l / 0.5);
  --juicy-orange-o10: hsl(from var(--juicy-orange) h s l / 0.1);
  --juicy-orange-o05: hsl(from var(--juicy-orange) h s l / 0.05);

  --juicy-orange-l80: oklch(from var(--juicy-orange) 0.8 c h);
  --juicy-orange-l50: oklch(from var(--juicy-orange) 0.5 c h);
  --juicy-orange-l10: oklch(from var(--juicy-orange) 0.1 c h);
  --juicy-orange-l05: oklch(from var(--juicy-orange) 0.05 c h);

  /* Golden Sun variants */
  --golden-sun-80: color-mix(in oklch, var(--golden-sun) 80%, light-dark(white, black));
  --golden-sun-50: color-mix(in oklch, var(--golden-sun) 50%, light-dark(white, black));
  --golden-sun-10: color-mix(in oklch, var(--golden-sun) 10%, light-dark(white, black));
  --golden-sun-05: color-mix(in oklch, var(--golden-sun) 5%, light-dark(white, black));

  --golden-sun-o80: hsl(from var(--golden-sun) h s l / 0.8);
  --golden-sun-o50: hsl(from var(--golden-sun) h s l / 0.5);
  --golden-sun-o10: hsl(from var(--golden-sun) h s l / 0.1);
  --golden-sun-o05: hsl(from var(--golden-sun) h s l / 0.05);

  --golden-sun-l80: oklch(from var(--golden-sun) 0.8 c h);
  --golden-sun-l50: oklch(from var(--golden-sun) 0.5 c h);
  --golden-sun-l10: oklch(from var(--golden-sun) 0.1 c h);
  --golden-sun-l05: oklch(from var(--golden-sun) 0.05 c h);
}