:root {
  /* Typography - font weight */
  --dkv-font-weight-regular: 400;

  /* Typography - font size */
  --dkv-font-size-h1: 32px;
  --dkv-font-size-h2: 24px;
  --dkv-font-size-h3: 20px;
  --dkv-font-size-h4: 16px;
  --dkv-font-size-body-1: 16px;
  --dkv-font-size-body-2: 14px;
  --dkv-font-size-button: 16px;
  --dkv-font-size-caption: 12px;

  /* Typography - line height */
  --dkv-line-height-h1: 40px;
  --dkv-line-height-h2: 32px;
  --dkv-line-height-h3: 28px;
  --dkv-line-height-h4: 24px;
  --dkv-line-height-body-1: 24px;
  --dkv-line-height-body-2: 20px;
  --dkv-line-height-button: 20px;
  --dkv-line-height-caption: 16px;

  /* Colors - gray */
  --dkv-gray-50: #ffffff;
  --dkv-gray-100: #fafafa;
  --dkv-gray-200: #efefef;
  --dkv-gray-300: #dbdbdb;
  --dkv-gray-400: #bcbcbc;
  --dkv-gray-500: #989898;
  --dkv-gray-600: #818181;
  --dkv-gray-700: #666666;
  --dkv-gray-800: #515151;
  --dkv-gray-900: #323232;

  --dkv-blue-50: #effafe;
  --dkv-blue-100: #e2f4fe;
  --dkv-blue-200: #a9dbf8;
  --dkv-blue-300: #82b8ea;
  --dkv-blue-400: #639bd4;
  --dkv-blue-500: #4181ba;
  --dkv-blue-600: #2e72a8;
  --dkv-blue-700: #195e8f;
  --dkv-blue-800: #004b78;
  --dkv-blue-900: #00365e;
  --dkv-blue-A100: var(--dkv-blue-800);
  --dkv-blue-A200: var(--dkv-blue-50);
  --dkv-blue-A300: var(--dkv-blue-900);
  --dkv-blue-A400: var(--dkv-blue-900);

  --dkv-orange-50: #fdf9e6;
  --dkv-orange-100: #fdeab9;
  --dkv-orange-200: #fbda87;
  --dkv-orange-300: #f8ca52;
  --dkv-orange-400: #f7be2b;
  --dkv-orange-500: #f9a606;
  --dkv-orange-600: #f59300;
  --dkv-orange-700: #f18400;
  --dkv-orange-800: #ea7500;
  --dkv-orange-900: #da6900;
  --dkv-orange-A100: var(--dkv-orange-600);
  --dkv-orange-A200: var(--dkv-orange-50);
  --dkv-orange-A300: var(--dkv-orange-900);
  --dkv-orange-A400: var(--dkv-orange-900);

  --dkv-red-50: #fff1f1;
  --dkv-red-100: #ffe2dc;
  --dkv-red-200: #ffc2b7;
  --dkv-red-300: #ffa797;
  --dkv-red-400: #ff836c;
  --dkv-red-500: #fc4d42;
  --dkv-red-600: #ec2121;
  --dkv-red-700: #d90928;
  --dkv-red-800: #c00020;
  --dkv-red-900: #ad001d;
  --dkv-red-A100: #d90928;
  --dkv-red-A200: #ffe2dc;
  --dkv-red-A300: #ad001d;
  --dkv-red-A400: #ad001d;

  --mat-stepper-header-hover-state-layer-shape: 12px;
}