:root {
  /* brand colors */
  --vd-color-brand: #00446a;
  --vd-color-brand-alt: #03324c;
  --vd-color-primary: #1379c8;
  --vd-color-primary-dark: #0f61a0;
  --vd-color-secondary: #d3e9fd;

  /* neutral colors */
  --vd-color-text-dark: #0a2433;
  --vd-color-dark: #4e575f;
  --vd-color-border: #a8b2b8;
  --vd-color-disabled: #dfe4e7;
  --vd-color-emphasis: #f0f3f5;
  --vd-color-white: #ffffff;

  /* other colors */
  --vd-color-_10-black: rgba(0, 0, 0, 0.1);
  --vd-color-black: rgb(0, 0, 0);
  --vd-color-hover: rgba(0, 0, 0, 0.06);

  /* box shadows */
  --vd-border-box-shadow: inset 0 0 0 1px var(--vd-color-_10-black);

  /* typography - font families */
  /* --vd-font-primary: 'ProximaNova', helvetica, arial, sans-serif; */

  /* font weights 
  --vd-font-light: 'ProximaNova-Light', helvetica, arial, sans-serif;
  --vd-font-regular: 'ProximaNova-Regular', helvetica, arial, sans-serif;
  --vd-font-semibold: 'ProximaNova-Semibold', helvetica, arial, sans-serif;
  --vd-font-bold: 'ProximaNova-Bold', helvetica, arial, sans-serif;*/

  /* typography - font sizes */
  --vd-text-scale-down-ratio: 0.1rem;
  --vd-text-scale-up-ratio: 0.25rem;
  --vd-text-base-size: 1rem; /* 16px */
  --vd-text-s: calc(var(--vd-text-base-size) - var(--vd-text-scale-down-ratio)); /* 14.4px */
  --vd-text-xs: calc(((var(--vd-text-s)) - var(--vd-text-scale-down-ratio))); /* 12.8 */
  --vd-text-xxs: 0.625rem; /* 10px */
  --vd-text-m: calc(var(--vd-text-base-size) + var(--vd-text-scale-up-ratio)); /* 20px */
  --vd-text-l: calc(var(--vd-text-m) + var(--vd-text-scale-up-ratio)); /* 24px */
  --vd-text-xl: calc(var(--vd-text-l) + var(--vd-text-scale-up-ratio)); /* 28px */
  --vd-text-xxl: calc(var(--vd-text-xl) + var(--vd-text-scale-up-ratio)); /* 32px */
  --vd-text-xxxl: calc(var(--vd-text-xxl) + var(--vd-text-scale-up-ratio)); /* 36px */

  /* line heights */
  --vd-ui-line-height: 1.2;
  --vd-content-line-height: 1.4;

  /* animated transitions - easing */
  --vd-transition-linear: cubic-bezier(0, 0, 1, 1);
  --vd-transition-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --vd-transition-ease-in: cubic-bezier(0.42, 0, 1, 1);
  --vd-transition-ease-out: cubic-bezier(0, 0, 0.58, 1);

  /* animated transitions - duration */
  --vd-transition-default-duration: 200ms;
  --vd-transition-slow-duration: 300ms;

  /* border */
  --vd-border-radius: 3px;

  /* spacing */
  --vd-space-base: 1rem; /* 16px */
  --vd-space-m: var(--vd-space-base); /* 16px */
  --vd-space-s: calc((var(--vd-space-m)) / 2); /* 8px */
  --vd-space-xs: calc((var(--vd-space-s)) / 2); /* 4px */
  --vd-space-xxs: calc((var(--vd-space-xs)) / 2); /* 2px */
  --vd-space-l: calc((var(--vd-space-m)) * 2); /* 32px */
  --vd-space-xl: calc((var(--vd-space-l)) * 2); /* 64px */
  --vd-space-xxl: calc((var(--vd-space-xl)) * 2); /* 128px */

  /* spacing - inset */
  --vd-inset-xs: var(--vd-space-xs);
  --vd-inset-s: var(--vd-space-s);
  --vd-inset-m: calc(var(--vd-space-s) + var(--vd-space-xs));
  --vd-inset-l: var(--vd-space-m);
  --vd-inset-xl: var(--vd-space-l);

  /* spacing - inset squish */
  --vd-inset-squish-xs: var(--vd-space-xs) var(--vd-space-s);
  --vd-inset-squish-s: var(--vd-space-s) var(--vd-space-m);
  --vd-inset-squish-m: calc(var(--vd-space-s) + var(--vd-space-xs)) calc(var(--vd-space-m) + var(--vd-space-s));
  --vd-inset-squish-l: var(--vd-space-m) var(--vd-space-l);

  /* spacing - inset stretch */
  --vd-inset-stretch-s: calc(var(--vd-space-s) + var(--vd-space-xs)) var(--vd-space-s);
  --vd-inset-stretch-m: var(--vd-space-m) calc(var(--vd-space-s) + var(--vd-space-xs));
  --vd-inset-stretch-l: calc(var(--vd-space-m) + var(--vd-space-s)) var(--vd-space-m);

  /* spacing - inline */
  --vd-inline-xxs: var(--vd-space-xxs);
  --vd-inline-xs: var(--vd-space-xs);
  --vd-inline-s: var(--vd-space-s);
  --vd-inline-m: var(--vd-space-m);
  --vd-inline-l: var(--vd-space-l);
  --vd-inline-xl: var(--vd-space-xl);
  --vd-inline-xxl: var(--vd-space-xxl);
}