@import "tailwindcss";

@theme {
  /* palette */
  --color-neutral-950: #000000;
  --color-neutral-700: #333333;
  --color-neutral-800-1: #232323;
  --color-neutral-50: #ffffff;
  --color-blue-600: #0000ee;
  --color-neutral-800-2: #292929;

  /* surfaces */
  --color-surface-0: #ffffff;
  --color-surface-1: #333333;
  --color-surface-2: #292929;
  --color-surface-3: #000000;

  /* fonts */
  --font-arial: "Arial", ui-sans-serif, system-ui, sans-serif;
  --font-founders-grotesk: "Founders Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-jet-brains: "Jet Brains", ui-sans-serif, system-ui, sans-serif;

  /* type scale (utilities: text-{role}, leading-{role}, tracking-{role}) */
  --text-display: 76px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: nullpx;
  --text-h2: 76px;
  --text-h2--line-height: 1;
  --text-h2--letter-spacing: nullpx;
  --text-h3: 44px;
  --text-h3--line-height: 1.2;
  --text-h3--letter-spacing: nullpx;
  --text-link: 36px;
  --text-link--line-height: 1;
  --text-link--letter-spacing: nullpx;
  --text-ui-input: 24px;
  --text-ui-input--line-height: 1.43;
  --text-ui-input--letter-spacing: nullpx;
  --text-body: 14px;
  --text-body--line-height: 1.43;
  --text-body--letter-spacing: nullpx;

  /* radii (utilities: rounded-{name}) */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;

  /* spacing (utilities: p-{key}, m-{key}, gap-{key}, …) */
  --spacing-base: 1px;
}