:root {
  /* palette */
  --color-neutral-700: #333333;
  --color-neutral-50-1: #ffffff;
  --color-neutral-950: #000000;
  --color-neutral-50-2: #f7f7f7;
  --color-blue-800: #00075f;
  --color-neutral-500: #696969;
  --color-red-200: #dfbebe;
  --color-violet-600: #3d46c2;
  --color-neutral-100-1: #dedede;
  --color-green-500: #238020;
  --color-neutral-100-2: #ebecf7;
  --color-green-200: #b4d6b3;
  --color-red-500: #b93d3d;

  /* surfaces */
  --surface-0: #ffffff;
  --surface-1: #ebecf7;
  --surface-2: #dedede;
  --surface-3: #696969;
  --surface-4: #333333;

  /* type scale */
  --text-body: 16px;
  --leading-body: 1;
  --tracking-body: nullpx;
  --text-h3: 16px;
  --leading-h3: 1.45;
  --tracking-h3: nullpx;
  --text-h4: 16px;
  --leading-h4: 1.45;
  --tracking-h4: nullpx;
  --text-link: 16px;
  --leading-link: 1;
  --tracking-link: nullpx;
  --text-ui-action: 12.5px;
  --leading-ui-action: null;
  --tracking-ui-action: nullpx;

  /* font families */
  --font-times-new-roman: "Times New Roman", ui-sans-serif, system-ui, sans-serif;
  --font-areal: "areal", ui-sans-serif, system-ui, sans-serif;

  /* radii */
  --radius-none: 0;
  --radius-sm: 3px;

  /* spacing */
  --spacing-base: 100px;
}