:root {
  --border-radius-none: var(--number-none);
  --border-color-default: var(--color-neutral-200);
  --border-radius-xs: var(--number-xs);
  --border-radius-sm: var(--number-sm);
  --border-radius-base: var(--number-base);
  --border-radius-md: var(--number-xl);
  --border-radius-lg: var(--number-2xl);
  --border-radius-full: var(--number-full);
  --border-color-focus: var(--color-brand-primary);
  --border-color-warning: var(--color-red-500);
  --border-color-surface: var(--surface-primary);
  --icon-default: var(--color-neutral-400);
  --icon-disabled: var(--color-neutral-300);
  --icon-active: var(--color-brand-primary);
  --icon-white: var(--color-base-white);
  --font-color-headline: var(--color-neutral-600);
  --font-color-body: var(--color-neutral-500);
  --font-color-placeholder: var(--color-neutral-400);
  --font-color-disabled: var(--color-neutral-400);
  --font-color-white: var(--color-base-white);
  --font-color-brand: var(--color-brand-primary);
  --font-color-accent: var(--color-green-200);
  --font-color-warning: var(--color-red-500);
  --surface-primary: var(--color-base-white);
  --surface-secondary: var(--color-green-100);
  --surface-tertiary: var(--color-brown-100);
  --surface-dark: var(--color-green-600);
  --surface-nocturnal: var(--color-neutral-600);
  --surface-gray: var(--color-neutral-100);
  --button-color-default: var(--color-brand-primary);
  --button-color-hover-light: var(--color-green-100);
  --button-color-hover-dark: var(--color-green-600);
  --button-color-disabled: var(--color-neutral-100);
}