:root {
  /* palette */
  --color-neutral-50-1: #ffffff;
  --color-green-100: #d9ff00;
  --color-neutral-800-1: #151f27;
  --color-neutral-700: #333333;
  --color-blue-400: #7b92a5;
  --color-blue-600-1: #0000ee;
  --color-neutral-800-2: #212d3a;
  --color-neutral-950: #000000;
  --color-neutral-400: #959494;
  --color-neutral-50-2: #f5f8fa;
  --color-blue-700: #253342;
  --color-blue-600-2: #516383;
  --color-blue-600-3: #536575;

  /* surfaces */
  --surface-0: #ffffff;
  --surface-1: #959494;
  --surface-2: #333333;
  --surface-3: #151f27;

  /* type scale */
  --text-display: 90px;
  --leading-display: 0.98;
  --tracking-display: nullpx;
  --text-h2: 40px;
  --leading-h2: 1;
  --tracking-h2: nullpx;
  --text-h3: 40px;
  --leading-h3: 1;
  --tracking-h3: nullpx;
  --text-ui-action: 25px;
  --leading-ui-action: 1.16;
  --tracking-ui-action: nullpx;
  --text-ui-input: 25px;
  --leading-ui-input: 1.4;
  --tracking-ui-input: nullpx;
  --text-body: 14px;
  --leading-body: 1.43;
  --tracking-body: nullpx;
  --text-link: 14px;
  --leading-link: 1.43;
  --tracking-link: nullpx;

  /* font families */
  --font-fhoscar: "Fhoscar", ui-sans-serif, system-ui, sans-serif;
  --font-manrope: "Manrope", ui-sans-serif, system-ui, sans-serif;

  /* radii */
  --radius-none: 0;
  --radius-xs: 2px;

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