html {
  --theme-brand-light-0: var(--green-4);
  --theme-brand-light-1: var(--green-6);

  --theme-error-light-0: var(--red-10);
  --theme-error-light-1: var(--red-9);

  --theme-success-light-0: var(--green-10);
  --theme-success-light-1: var(--green-9);

  --theme-warning-light-0: var(--yellow-3);
  --theme-warning-light-1: var(--yellow-4);

  --theme-background-light-0: var(--gray-0);
  --theme-background-light-1: var(--gray-1);
  --theme-background-light-2: var(--gray-2);
  --theme-background-light-3: var(--gray-3);
  --theme-background-light-4: var(--gray-4);
  --theme-background-light-5: var(--gray-5);
  --theme-background-light-6: var(--gray-6);
  --theme-background-light-7: var(--gray-7);
  --theme-background-light-8: var(--gray-8);
  --theme-background-light-9: var(--gray-9);
  --theme-background-light-10: var(--gray-10);
  --theme-background-light-11: var(--gray-11);
  --theme-background-light-12: var(--gray-12);

  --theme-foreground-light-0: var(--gray-12);
  --theme-foreground-light-1: var(--gray-11);
  --theme-foreground-light-2: var(--gray-10);
  --theme-foreground-light-3: var(--gray-9);
  --theme-foreground-light-4: var(--gray-8);
  --theme-foreground-light-5: var(--gray-7);
  --theme-foreground-light-6: var(--gray-6);
  --theme-foreground-light-7: var(--gray-5);
  --theme-foreground-light-8: var(--gray-4);
  --theme-foreground-light-9: var(--gray-3);
  --theme-foreground-light-10: var(--gray-2);
  --theme-foreground-light-11: var(--gray-1);
  --theme-foreground-light-12: var(--gray0);
}

html {
  --theme-brand-dark-0: var(--green-2);
  --theme-brand-dark-1: var(--green-3);

  --theme-error-dark-0: var(--red-10);
  --theme-error-dark-1: var(--red-11);

  --theme-success-dark-0: var(--green-10);
  --theme-success-dark-1: var(--green-11);

  --theme-warning-dark-0: var(--yellow-6);
  --theme-warning-dark-1: var(--yellow-7);

  --theme-background-dark-0: var(--gray-12);
  --theme-background-dark-1: var(--gray-11);
  --theme-background-dark-2: var(--gray-10);
  --theme-background-dark-3: var(--gray-9);
  --theme-background-dark-4: var(--gray-8);
  --theme-background-dark-5: var(--gray-7);
  --theme-background-dark-6: var(--gray-6);
  --theme-background-dark-7: var(--gray-5);
  --theme-background-dark-8: var(--gray-4);
  --theme-background-dark-9: var(--gray-3);
  --theme-background-dark-10: var(--gray-2);
  --theme-background-dark-11: var(--gray-1);
  --theme-background-dark-12: var(--gray0);

  --theme-foreground-dark-0: var(--gray-0);
  --theme-foreground-dark-1: var(--gray-1);
  --theme-foreground-dark-2: var(--gray-2);
  --theme-foreground-dark-3: var(--gray-3);
  --theme-foreground-dark-4: var(--gray-4);
  --theme-foreground-dark-5: var(--gray-5);
  --theme-foreground-dark-6: var(--gray-6);
  --theme-foreground-dark-7: var(--gray-7);
  --theme-foreground-dark-8: var(--gray-8);
  --theme-foreground-dark-9: var(--gray-9);
  --theme-foreground-dark-10: var(--gray-10);
  --theme-foreground-dark-11: var(--gray-11);
  --theme-foreground-dark-12: var(--gray-12);
}

:root {
  --theme-brand-0: var(--theme-brand-light-0);
  --theme-brand-1: var(--theme-brand-light-1);

  --theme-error-0: var(--theme-error-light-0);
  --theme-error-1: var(--theme-error-light-1);

  --theme-success-0: var(--theme-success-light-0);
  --theme-success-1: var(--theme-success-light-1);

  --theme-warning-0: var(--theme-warning-light-0);
  --theme-warning-1: var(--theme-warning-light-1);

  --theme-background-0: var(--theme-background-light-0);
  --theme-background-1: var(--theme-background-light-1);
  --theme-background-2: var(--theme-background-light-2);
  --theme-background-3: var(--theme-background-light-3);
  --theme-background-4: var(--theme-background-light-4);
  --theme-background-5: var(--theme-background-light-5);
  --theme-background-6: var(--theme-background-light-6);
  --theme-background-7: var(--theme-background-light-7);
  --theme-background-8: var(--theme-background-light-8);
  --theme-background-9: var(--theme-background-light-9);
  --theme-background-10: var(--theme-background-light-10);
  --theme-background-11: var(--theme-background-light-11);
  --theme-background-12: var(--theme-background-light-12);

  --theme-foreground-0: var(--theme-foreground-light-0);
  --theme-foreground-1: var(--theme-foreground-light-1);
  --theme-foreground-2: var(--theme-foreground-light-2);
  --theme-foreground-3: var(--theme-foreground-light-3);
  --theme-foreground-4: var(--theme-foreground-light-4);
  --theme-foreground-5: var(--theme-foreground-light-5);
  --theme-foreground-6: var(--theme-foreground-light-6);
  --theme-foreground-7: var(--theme-foreground-light-7);
  --theme-foreground-8: var(--theme-foreground-light-8);
  --theme-foreground-9: var(--theme-foreground-light-9);
  --theme-foreground-10: var(--theme-foreground-light-10);
  --theme-foreground-11: var(--theme-foreground-light-11);
  --theme-foreground-12: var(--theme-foreground-light-12);

  --theme-wireframe-0: var(--theme-background-light-4);
  --theme-wireframe-1: var(--theme-background-light-6);
}

@media (prefers-color-scheme: dark) {
  :root {
    --theme-brand-0: var(--theme-brand-dark-0);
    --theme-brand-1: var(--theme-brand-dark-1);

    --theme-error-0: var(--theme-error-dark-0);
    --theme-error-1: var(--theme-error-dark-1);

    --theme-success-0: var(--theme-success-dark-0);
    --theme-success-1: var(--theme-success-dark-1);

    --theme-warning-0: var(--theme-warning-dark-0);
    --theme-warning-1: var(--theme-warning-dark-1);

    --theme-background-0: var(--theme-background-dark-0);
    --theme-background-1: var(--theme-background-dark-1);
    --theme-background-2: var(--theme-background-dark-2);
    --theme-background-3: var(--theme-background-dark-3);
    --theme-background-4: var(--theme-background-dark-4);
    --theme-background-5: var(--theme-background-dark-5);
    --theme-background-6: var(--theme-background-dark-6);
    --theme-background-7: var(--theme-background-dark-7);
    --theme-background-8: var(--theme-background-dark-8);
    --theme-background-9: var(--theme-background-dark-9);
    --theme-background-10: var(--theme-background-dark-10);
    --theme-background-11: var(--theme-background-dark-11);
    --theme-background-12: var(--theme-background-dark-12);

    --theme-foreground-0: var(--theme-foreground-dark-0);
    --theme-foreground-1: var(--theme-foreground-dark-1);
    --theme-foreground-2: var(--theme-foreground-dark-2);
    --theme-foreground-3: var(--theme-foreground-dark-3);
    --theme-foreground-4: var(--theme-foreground-dark-4);
    --theme-foreground-5: var(--theme-foreground-dark-5);
    --theme-foreground-6: var(--theme-foreground-dark-6);
    --theme-foreground-7: var(--theme-foreground-dark-7);
    --theme-foreground-8: var(--theme-foreground-dark-8);
    --theme-foreground-9: var(--theme-foreground-dark-9);
    --theme-foreground-10: var(--theme-foreground-dark-10);
    --theme-foreground-11: var(--theme-foreground-dark-11);
    --theme-foreground-12: var(--theme-foreground-dark-12);

    --theme-wireframe-0: var(--theme-background-dark-4);
    --theme-wireframe-1: var(--theme-background-dark-5);
  }
}

html {
  background: var(--theme-background-1);
  font-family: var(--font-mono);
}