:root{
  --color-neutral-100: #fff;
  --color-neutral-200: #f5f5f5;
  --color-neutral-300: #dddddd;
  --color-neutral-400: #f5f5f5;
  --color-neutral-500: #646464;
  --color-neutral-900: #000000;

  --color-primary-400: #355083;
  --color-primary-500: #293576;

  --color-secondary-400: #01D890;
  --color-secondary-700: #158382;
}

:root, [light]{
  --color-surface: var(--color-neutral-100);
  --color-container: var(--color-neutral-200);
  --color-container-low: var(--color-neutral-200);
  --color-on-surface: var(--color-neutral-500);
  --color-on-container: var(--color-neutral-500);
  --color-accent: var(--color-primary-500);
  --color-complementary: var(--color-secondary-400);
  --color-interactive: var(--color-secondary-700);
  --color-on-interactive: var(--color-neutral-300);
  --color-interactive-hover: var(--color-secondary-400);
  --color-on-interactive-hover: var(--color-neutral-100);

  --color-linear: linear-gradient(to right, var(--color-primary-400), var(--color-secondary-400));
  --color-linear-inverse: linear-gradient(to right, var(--color-secondary-400), var(--color-primary-400));
}

[accent] {
  --color-surface: var(--color-neutral-100);
  --color-container: var(--color-secondary-400);
  --color-container-low: var(--color-secondary-400);
  --color-on-surface: var(--color-neutral-100);
  --color-on-container: var(--color-neutral-100);
  --color-accent: var(--color-neutral-100);
  --color-complementary: var(--color-primary-500);
  --color-interactive: var(--color-secondary-700);
  --color-on-interactive: var(--color-neutral-300);
  --color-interactive-hover: var(--color-secondary-400);
  --color-on-interactive-hover: var(--color-neutral-100);
}

[complementary] {
  --color-surface: var(--color-neutral-100);
  --color-container: var(--color-primary-500);
  --color-container-low: var(--color-primary-500);
  --color-on-surface: var(--color-neutral-100);
  --color-on-container: var(--color-neutral-100);
  --color-accent: var(--color-neutral-100);
  --color-complementary: var(--color-secondary-400);
  --color-interactive: var(--color-primary-500);
  --color-on-interactive: var(--color-neutral-300);
  --color-interactive-hover: var(--color-primary-700);
  --color-on-interactive-hover: var(--color-neutral-100);
}