:root {
  /* TYPOGRAPHY TOKENS */
  --gen-typography-heading-xl: "Open Sans", Light, 24px;
  --gen-typography-heading-lg: "Open Sans", Light, 18px;
  --gen-typography-heading-md: "Open Sans", Regular, 16px;
  --gen-typography-heading-sm: "Open Sans", Regular, 11px;

  --gen-typography-body-normal: "Open Sans", Regular, 13px;
  --gen-typography-body-semibold: "Open Sans", Semibold, 13px;
  --gen-typography-label-normal: "Open Sans", Regular, 11px;
  --gen-typography-label-semibold: "Open Sans", Semibold, 11px;

  --gen-typography-monospace-normal: Inconsolata, Regular, 13px;

  /* BORDER RADIUS */
  --gen-border-radius-sm: 4px;
  --gen-border-radius-md: 8px;
  --gen-border-radius-lg: 16px;

  /* BORDER WIDTH */
  --gen-border-width-sm: 1px;
  --gen-border-width-md: 2px;
  --gen-border-width-lg: 4px;

  /* SPACING TOKENS */
  --gen-spacing-025: 2px;
  --gen-spacing-050: 4px;
  --gen-spacing-100: 6px;
  --gen-spacing-200: 12px;
  --gen-spacing-300: 18px;
  --gen-spacing-400: 24px;
  --gen-spacing-500: 30px;
  --gen-spacing-600: 36px;
  --gen-spacing-700: 42px;
  --gen-spacing-800: 48px;
  --gen-spacing-900: 54px;
  --gen-spacing-1000: 60px;

  /* SIZE TOKENS */
  --gen-size-sm: 12px;
  --gen-size-md: 20px;
  --gen-size-lg: 32px;
  --gen-size-xl: 40px;
  --gen-size-2xl: 56px;

  /* SHADOW TOKENS */
  --gen-shadow-xs: 0px 1px 4px 0px #00000050;
  --gen-shadow-sm: 0px 4px 5px 0px #00000020, 0px 3px 14px 0px #00000012, 0px 8px 10px 0px #00000014;
  --gen-shadow-lg: 0px 8px 10px 0px #00000020, 0px 6px 30px 0px #00000012, 0px 16px 24px 0px #00000014;

  --gen-opacity-disabled: 0.5;
}