[data-theme='dark'] {
  --content-brand-primary: var(--brand-500);
  --content-brand-secondary: var(--brand-900);
  --content-primary: var(--gray-100);
  --content-primary-inverse: var(--gray-1000);
  --content-secondary: var(--gray-400);
  --content-tertiary: var(--gray-700);
  --content-success: var(--green-300);
  --content-error: var(--red-300);
  --content-caption: var(--gray-500);
  --content-info: var(--blue-500);
  --content-warning: var(--orange-400);
  --content-yellow: var(--yellow-400);

  --surface-primary: var(--gray-1000);
  --surface-secondary: var(--gray-800);
  --surface-primary-variant: var(--gray-900);
  --surface-secondary-variant: var(--gray-700);
  --surface-tertiary: var(--gray-700);
  --surface-success-primary: var(--green-300);
  --surface-success-secondary: var(--green-700);
  --surface-success-tertiary: var(--green-800);
  --surface-error-primary: var(--red-300);
  --surface-error-secondary: var(--red-800);
  --surface-error-tertiary: var(--red-900);
  --surface-warning-primary: var(--orange-400);
  --surface-warning-secondary: var(--orange-800);
  --surface-warning-tertiary: var(--orange-900);
  --surface-info-primary: var(--blue-500);
  --surface-info-secondary: var(--blue-800);
  --surface-info-tertiary: var(--blue-900);
  --surface-brand-primary: var(--brand-500);
  --surface-brand-secondary: var(--brand-900);
  --surface-hover: var(--gray-900);
  --surface-alpha: var(--gray-1000a-60);
  --overlay: var(--gray-900a-60);
  --surface-base: var(--gray-black);

  --border-primary: var(--gray-800);
  --border-brand-primary: var(--brand-500);
  --border-brand-secondary: var(--brand-900);
  --border-secondary: var(--gray-400);
  --border-tertiary: var(--gray-700);
  --border-info-primary: var(--blue-500);
  --border-info-secondary: var(--blue-900);
  --border-success-primary: var(--green-300);
  --border-success-secondary: var(--green-700);
  --border-warning-primary: var(--orange-400);
  --border-warning-secondary: var(--orange-800);
  --border-error-primary: var(--red-300);
  --border-error-secondary: var(--red-800);
  --border-yellow: var(--yellow-400);

  --shadow-primary: var(--gray-1000);
  --shadow-secondary: var(--gray-900);
  --shadow-focused: var(--brand-800);

  --label-blue: var(--blue-900);
  --label-gray: var(--gray-700);
  --label-gray-secondary: var(--gray-800);
  --label-orange: var(--orange-900);
  --label-red: var(--red-800);
  --label-yellow: var(--yellow-900);
  --label-green: var(--green-700);
  --label-brand: var(--brand-900);

  --button-primary-default: var(--brand-500);
  --button-primary-hover: var(--brand-600);
  --button-primary-pressed: var(--brand-700);
  --button-secondary-default: var(--gray-800);
  --button-secondary-hover: var(--gray-900);
  --button-secondary-pressed: var(--gray-700);
  --content-white: var(--gray-100);
  --button-success-default: var(--green-400);
  --button-success-hover: var(--green-500);
  --button-success-pressed: var(--green-600);
  --button-error-default: var(--red-300);
  --button-error-hover: var(--red-500);
  --button-error-pressed: var(--red-600);
  --button-warning-default: var(--orange-500);
  --button-warning-hover: var(--orange-600);
  --button-warning-pressed: var(--orange-700);

  --line-chart-positive: var(--green-500a-10);
  --line-chart-negative: var(--red-500a-10);

  --chart-grid-line: rgba(113, 125, 150, 0.125);
}

[data-theme='light'] {
  --content-brand-primary: var(--brand-500);
  --content-brand-secondary: var(--brand-200);
  --content-primary: var(--gray-1000);
  --content-primary-inverse: var(--gray-100);
  --content-secondary: var(--gray-600);
  --content-tertiary: var(--gray-400);
  --content-success: var(--green-500);
  --content-error: var(--red-400);
  --content-caption: var(--gray-500);
  --content-info: var(--blue-500);
  --content-warning: var(--orange-500);
  --content-yellow: var(--yellow-500);

  --surface-primary: var(--gray-100);
  --surface-secondary: var(--gray-200);
  --surface-primary-variant: var(--gray-150);
  --surface-secondary-variant: var(--gray-300);
  --surface-tertiary: var(--gray-400);
  --surface-success-primary: var(--green-500);
  --surface-success-secondary: var(--green-200);
  --surface-success-tertiary: var(--green-100);
  --surface-error-primary: var(--red-400);
  --surface-error-secondary: var(--red-200);
  --surface-error-tertiary: var(--red-100);
  --surface-warning-primary: var(--orange-500);
  --surface-warning-secondary: var(--orange-200);
  --surface-warning-tertiary: var(--orange-100);
  --surface-info-primary: var(--blue-500);
  --surface-info-secondary: var(--blue-200);
  --surface-info-tertiary: var(--blue-100);
  --surface-brand-primary: var(--brand-500);
  --surface-brand-secondary: var(--brand-600);
  --surface-hover: var(--gray-150);
  --surface-alpha: var(--gray-100a-60);
  --overlay: var(--gray-500a-40);
  --surface-base: var(--gray-white);

  --border-primary: var(--gray-250);
  --border-brand-primary: var(--brand-500);
  --border-brand-secondary: var(--brand-200);
  --border-secondary: var(--gray-600);
  --border-tertiary: var(--gray-400);
  --border-info-primary: var(--blue-500);
  --border-info-secondary: var(--blue-200);
  --border-success-primary: var(--green-500);
  --border-success-secondary: var(--green-200);
  --border-warning-primary: var(--orange-500);
  --border-warning-secondary: var(--orange-200);
  --border-error-primary: var(--red-400);
  --border-error-secondary: var(--red-200);
  --border-yellow: var(--yellow-500);

  --shadow-primary: var(--gray-300);
  --shadow-secondary: var(--gray-200);
  --shadow-focused: var(--brand-100);

  --label-blue: var(--blue-200);
  --label-gray: var(--gray-400);
  --label-gray-secondary: var(--gray-250);
  --label-orange: var(--orange-100);
  --label-red: var(--red-200);
  --label-yellow: var(--yellow-100);
  --label-green: var(--green-200);
  --label-brand: var(--brand-200);

  --button-primary-default: var(--brand-500);
  --button-primary-hover: var(--brand-600);
  --button-primary-pressed: var(--brand-700);
  --button-secondary-default: var(--gray-200);
  --button-secondary-hover: var(--gray-150);
  --button-secondary-pressed: var(--gray-300);
  --content-white: var(--gray-100);
  --button-success-default: var(--green-500);
  --button-success-hover: var(--green-600);
  --button-success-pressed: var(--green-700);
  --button-error-default: var(--red-400);
  --button-error-hover: var(--red-500);
  --button-error-pressed: var(--red-600);
  --button-warning-default: var(--orange-500);
  --button-warning-hover: var(--orange-600);
  --button-warning-pressed: var(--orange-700);

  --line-chart-positive: var(--green-500a-10);
  --line-chart-negative: var(--red-500a-10);

  --chart-grid-line: rgba(113, 125, 150, 0.125);
}

[data-theme='dark'] {
  /*Override dark theme colors below*/
}

[data-theme='light'] {
  /*Override light theme colors below*/
}