/* global */
:root {
  /* ligth */
  /* color */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-bg-card: var(--color-white);
  --color-bg-footer: var(--color-global-b-accent-darkest);
  --color-bg-nav: var(--color-surface-subtle-b);
  --color-bg-page: var(--color-global-a-accent-lightest);
  --color-bg-side-pannel: var(--color-global-b-accent-lightest);
  --color-brand-primary: #0f69c4;
  --color-brand-secondary: #001c41;
  --color-global-a-100: #e2eefc;
  --color-global-a-200: #bedbf9;
  --color-global-a-300: #85bef4;
  --color-global-a-400: #449dec;
  --color-global-a-50: #f1f7fe;
  --color-global-a-500: #1c81db;
  --color-global-a-600: #0f69c4;
  --color-global-a-700: #0d5097;
  --color-global-a-800: #0f457d;
  --color-global-a-900: #123a68;
  --color-global-a-950: #0c2545;
  --color-global-a-accent: var(--color-global-a-600);
  --color-global-a-accent-dark: var(--color-global-a-800);
  --color-global-a-accent-darker: var(--color-global-a-900);
  --color-global-a-accent-darkest: var(--color-global-a-950);
  --color-global-a-accent-light: var(--color-global-a-200);
  --color-global-a-accent-lighter: var(--color-global-a-100);
  --color-global-a-accent-lightest: var(--color-global-a-50);
  --color-global-a-state-active: var(--color-global-a-accent);
  --color-global-a-state-default: var(--color-global-a-accent);
  --color-global-a-state-disabled: var(--color-neutral-lighter);
  --color-global-a-state-hover: var(--color-global-a-accent-dark);
  --color-global-a-state-inputctrl: var(--color-white);
  --color-global-a-state-inputctrl-disabled: var(--color-neutral-lightest);
  --color-global-a-state-inputctrl-hover: var(--color-white);
  --color-global-a-state-selected: var(--color-global-a-accent-darker);
  --color-global-b-100: #eaeef4;
  --color-global-b-200: #d0dae7;
  --color-global-b-300: #a6bad3;
  --color-global-b-400: #7696ba;
  --color-global-b-50: #f5f7fa;
  --color-global-b-500: #5579a2;
  --color-global-b-600: #426187;
  --color-global-b-700: #334967;
  --color-global-b-800: #30435c;
  --color-global-b-900: #2c3a4e;
  --color-global-b-950: #1d2634;
  --color-global-b-accent: var(--color-global-b-500);
  --color-global-b-accent-dark: var(--color-global-b-800);
  --color-global-b-accent-darker: var(--color-global-b-900);
  --color-global-b-accent-darkest: var(--color-global-b-950);
  --color-global-b-accent-light: var(--color-global-b-200);
  --color-global-b-accent-lighter: var(--color-global-b-100);
  --color-global-b-accent-lightest: var(--color-global-b-50);
  --color-global-b-state-active: var(--color-global-b-accent);
  --color-global-b-state-default: var(--color-global-b-accent);
  --color-global-b-state-disabled: var(--color-global-b-accent-lightest);
  --color-global-b-state-hover: var(--color-global-b-accent-dark);
  --color-global-b-state-inputctrl: var(--color-global-b-accent-light);
  --color-global-b-state-inputctrl-disabled: var(--color-global-b-accent-light);
  --color-global-b-state-inputctrl-hover: var(--color-global-b-accent-light);
  --color-global-b-state-selected: var(--color-global-b-accent-darker);
  --color-gray-100: #e7e7e7;
  --color-gray-200: #d1d1d1;
  --color-gray-300: #b0b0b0;
  --color-gray-400: #888888;
  --color-gray-50: #f6f6f6;
  --color-gray-500: #787878;
  --color-gray-600: #5d5d5d;
  --color-gray-700: #4f4f4f;
  --color-gray-800: #454545;
  --color-gray-900: #3d3d3d;
  --color-gray-950: #262626;
  --color-neutral-base: var(--color-gray-400);
  --color-neutral-dark: var(--color-gray-500);
  --color-neutral-darker: var(--color-gray-600);
  --color-neutral-darkest: var(--color-gray-700);
  --color-neutral-light: var(--color-gray-200);
  --color-neutral-lighter: var(--color-gray-100);
  --color-neutral-lightest: var(--color-gray-50);
  --color-path-accent-a: var(--color-global-a-accent-dark);
  --color-path-accent-b: var(--color-global-b-accent-darker);
  --color-path-brand-primary: var(--color-brand-primary);
  --color-path-brand-secondary: var(--color-brand-secondary);
  --color-path-disabled: var(--color-neutral-base);
  --color-path-error: var(--color-system-error-dark);
  --color-path-info: var(--color-system-info-dark);
  --color-path-inverse: var(--color-white);
  --color-path-link: var(--color-system-info);
  --color-path-link-hover: var(--color-system-info-dark);
  --color-path-middle: var(--color-neutral-dark);
  --color-path-strong: var(--color-neutral-darkest);
  --color-path-subtle: var(--color-neutral-light);
  --color-path-success: var(--color-system-success-dark);
  --color-path-warning: var(--color-system-warning-darker);
  --color-surface-bold-a: var(--color-global-a-accent-dark);
  --color-surface-bold-b: var(--color-global-b-accent-dark);
  --color-surface-disabled: var(--color-global-a-accent-lightest);
  --color-surface-subtle-a: var(--color-global-a-accent-lightest);
  --color-surface-subtle-b: var(--color-global-b-accent-lightest);
  --color-surface-subtle-neutral: var(--color-neutral-lightest);
  --color-system-error: #ff0000;
  --color-system-error-dark: #cb0808;
  --color-system-error-darker: #8a0606;
  --color-system-error-darkest: #670d0d;
  --color-system-error-light: #fb6363;
  --color-system-error-lighter: #faa5a5;
  --color-system-error-lightest: #ffd1d1;
  --color-system-info: #4285f4;
  --color-system-info-dark: #2358c2;
  --color-system-info-darker: #1111b1;
  --color-system-info-darkest: #00008b;
  --color-system-info-light: #48a5ff;
  --color-system-info-lighter: #89c5ff;
  --color-system-info-lightest: #baddff;
  --color-system-success: #2ecc71;
  --color-system-success-dark: #37bb6f;
  --color-system-success-darker: #2d8d56;
  --color-system-success-darkest: #006400;
  --color-system-success-light: #57e192;
  --color-system-success-lighter: #ccffcc;
  --color-system-success-lightest: #e2ffe2;
  --color-system-warning: #ffa500;
  --color-system-warning-dark: #ff8c00;
  --color-system-warning-darker: #d47809;
  --color-system-warning-darkest: #713f01;
  --color-system-warning-light: #ffb52e;
  --color-system-warning-lighter: #ffcc6e;
  --color-system-warning-lightest: #ffe1ab;
  /* number */
  --breakpoint-xxs: 428px;
  --breakpoint-xs: 680px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1280px;
  --breakpoint-viewport-size: 1440px;
  --breakpoint-xl: 1440px;
 --corner-xs: var(--scale-l-2);
  --corner-sm: var(--scale-l-4);
  --corner-md: var(--scale-l-8);
  --corner-lg: var(--scale-l-10);
  --font-body-xs: var(--scale-l-13);
  --font-body-sm: var(--scale-l-14);
  --font-body-md: var(--scale-l-16);
  --font-button-text: var(--scale-l-18);
  --font-lh-body-sm: var(--scale-l-18);
  --font-lh-body-xs: var(--scale-l-18);
  --font-body-lg: var(--scale-l-20);
  --font-lh-body-md: var(--scale-l-20);
  --font-heading-md: var(--scale-l-22);
  --font-heading-lg: var(--scale-l-28);
  --font-lh-body-lg: var(--scale-l-28);
  --font-lh-heading-md: var(--scale-l-34);
  --font-heading-xl: var(--scale-l-36);
  --font-lh-heading-lg: var(--scale-l-36);
  --font-lh-heading-xl: var(--scale-l-43);
  --font-heading-xxl: var(--scale-l-44);
  --font-lh-heading-xxl: var(--scale-l-50);
  --font-weight-light: 300px;
  --font-weight-regular: 400px;
  --font-weight-medium: 500px;
  --font-weight-bold: 700px;
  --font-fontweight-black: 900px;
  --layout-colums-grid: var(--scale-l-12);
  --layout-gutter-layout: var(--scale-l-16);
  --layout-padding-site: 37px;
  --layout-margin-section: var(--scale-l-38);
  --opacity-opacity-strong: 0.30000001192092896;
  --opacity-medium: 0.5;
  --opacity-subtle: 0.800000011920929;
  --scale-l-0: 0px;
  --scale-l-2: 2px;
  --scale-l-4: 4px;
  --scale-l-6: 6px;
  --scale-l-8: 8px;
  --scale-l-10: 10px;
  --scale-l-12: 12px;
  --scale-l-13: 13px;
  --scale-l-14: 14px;
  --scale-l-16: 16px;
  --scale-l-18: 18px;
  --scale-l-20: 20px;
  --scale-l-22: 22px;
  --scale-l-24: 24px;
  --scale-l-26: 26px;
  --scale-l-28: 28px;
  --scale-l-30: 30px;
  --scale-l-32: 32px;
  --scale-l-34: 34px;
  --scale-l-36: 36px;
  --scale-l-37: 37px;
  --scale-l-38: 38px;
  --scale-l-40: 40px;
  --scale-l-42: 42px;
  --scale-l-43: 43px;
  --scale-l-44: 44px;
  --scale-l-46: 46px;
  --scale-l-48: 48px;
  --scale-l-50: 50px;
  --scale-l-54: 54px;
  --scale-l-56: 56px;
  --scale-l-62: 62px;
  --scale-l-64: 64px;
  --scale-l-67: 67px;
  --scale-l-72: 72px;
  --scale-l-78: 78px;
  --scale-l-80: 80px;
  --scale-l-88: 88px;
  --scale-l-96: 96px;
  --scale-l-104: 104px;
  --scale-l-112: 112px;
  --scale-l-120: 120px;
  --scale-l-128: 128px;
  --scale-l-144: 144px;
  --scale-l-168: 168px;
  --scale-scale-l-192: 192px;
  --spaces-xxs: var(--scale-l-2);
  --spaces-xs: var(--scale-l-4);
  --spaces-sm: var(--scale-l-8);
  --spaces-md: var(--scale-l-16);
  --spaces-lg: var(--scale-l-24);
  --spaces-xl: var(--scale-l-48);
  --spaces-xxl: var(--scale-l-144);
  --z-index-z-index-base: 1px;
  --z-index-dropdown: 100px;
  --z-index-modal: 1000px;
  --z-index-tooltip: 2000px;
  /* string */
  --font-family-number: Lato Mono;
  --font-family-primary: Lato;
}