: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-300: #36A9E1;
  --color-primary-400: #1A5EA9;
  --color-primary-500: #0E4F97;
  --color-primary-700: #26316c;

  --color-secondary-400: #F7C934;
  --color-secondary-700: #F4981B;

  --color-extra: #95C11F;
}

: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-secondary-700);
  --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-500), var(--color-secondary-400));
  --color-linear-inverse: linear-gradient(to right, var(--color-secondary-400), var(--color-primary-500));
}

[dark] {
  --color-surface: var(--color-primary-400);
  --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-700);
  --color-on-interactive: var(--color-neutral-300);
  --color-interactive-hover: var(--color-primary-500);
  --color-on-interactive-hover: var(--color-neutral-100);
}

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