:root {
  --primary-050: oklch(0.95 0.03 0);
  --primary-150: oklch(0.9 0.06 0);
  --primary-250: oklch(0.85 0.08 0);
  --primary-350: oklch(0.79 0.11 0);
  --primary-450: oklch(0.74 0.15 0);
  --primary-500: oklch(0.76 0.16 0);
  --primary-550: oklch(0.73 0.15 0);
  --primary-650: oklch(0.67 0.13 0);
  --primary-750: oklch(0.6 0.12 0);
  --primary-850: oklch(0.51 0.1 0);
  --primary-950: oklch(0.42 0.08 0);

  --neutral-050: oklch(0.94 0 0);
  --neutral-150: oklch(0.89 0 0);
  --neutral-250: oklch(0.83 0 0);
  --neutral-350: oklch(0.77 0 0);
  --neutral-450: oklch(0.71 0 0);
  --neutral-500: oklch(0.68 0 0);
  --neutral-550: oklch(0.66 0 0);
  --neutral-650: oklch(0.59 0 0);
  --neutral-750: oklch(0.52 0 0);
  --neutral-850: oklch(0.43 0 0);
  --neutral-950: oklch(0.31 0 0);

  --background-dark: oklch(0 0 0);
  --background-light: oklch(1 0 0);
  --text-light: oklch(1 0 0);
  --text-dark: oklch(0 0 0);
}

@media (prefers-color-scheme: light) {
  :root {
    --background-primary: var(--background-light);
    --text-primary: var(--text-dark);

    --primary-contrast-05: var(--primary-050);
    --primary-contrast-15: var(--primary-150);
    --primary-contrast-25: var(--primary-250);
    --primary-contrast-35: var(--primary-350);
    --primary-contrast-45: var(--primary-450);
    --primary-contrast-50: var(--primary-500);
    --primary-contrast-55: var(--primary-550);
    --primary-contrast-65: var(--primary-650);
    --primary-contrast-75: var(--primary-750);
    --primary-contrast-85: var(--primary-850);
    --primary-contrast-95: var(--primary-950);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-primary: var(--background-dark);
    --text-primary: var(--text-light);

    --primary-contrast-05: var(--primary-950);
    --primary-contrast-15: var(--primary-850);
    --primary-contrast-25: var(--primary-750);
    --primary-contrast-35: var(--primary-650);
    --primary-contrast-45: var(--primary-550);
    --primary-contrast-50: var(--primary-500);
    --primary-contrast-55: var(--primary-450);
    --primary-contrast-65: var(--primary-350);
    --primary-contrast-75: var(--primary-250);
    --primary-contrast-85: var(--primary-150);
    --primary-contrast-95: var(--primary-050);
  }
}

/* Color Cycling Animation */
@keyframes hue-cycle {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

body {
  animation: hue-cycle 15s infinite linear;
}