:root {
  /* Color: Token */
  --white: #fff;
  --black: #000;
  --gray-lightest: #e6e6e6;
  --gray-lighter: #d2d2d2;
  --gray-normal: #969696;
  --light-blue-lightest: #d0eafe;
  --yellow-lightest: #fbedb0;
  --green-lightest: #d3efbf;

  /* Color: Brand */
  --brand-primary-lightest: #d8ddff;
  --brand-primary-lighter: #91a0ff;
  --brand-primary-normal: #0071e0;
  --brand-primary-darker: #293094;
  --brand-primary-darkest: #312b7c;

  /* Color: Status */
  --status-not-active-normal: #969696;

  /* Color: Notify */
  --notify-warning-lightest: #fbedb0;
  --notify-warning-darkest: #5e481a;
  --notify-danger-lightest: #fdd3cd;
  --notify-danger-normal: #f53c20;
  --notify-danger-darkest: #8a0000;
  --notify-success-lightest: #d3efbf;
  --notify-success-darkest: #00453a;
  --notify-other-lightest: #e6e6e6;
  --notify-other-darkest: #000;

  /* Color: Usecase */
  --normal-text: #323232;
  --link-text: #0071e0;
  --background-surface: #f0f0f0;

  /* Color: Border */
  --normal-border: #969696;

  /* Spacing: Spacing */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-s: 16px;
  --spacing-m: 24px;
  --spacing-l: 40px;
  --spacing-xl: 64px;
  --spacing-xxl: 104px;

  /* ZIndex */
  --z-index-header: 10;
  --z-index-popup: 50;
  --z-index-dialog: 100;

  /* Typography */
  --body-0: 12px;
  --body-1: 14px;
  --body-2: 16px;
  --body-3: 19px;
  --body-4: 22px;
  --body-5: 28px;
  --body-6: 37px;
  --body-7: 56px;
  --body-8: 112px;
}