@import "tailwindcss";

@theme {
  /* palette */
  --color-neutral-950: #000000;
  --color-neutral-50-1: #f9fafb;
  --color-neutral-800: #1d1d1d;
  --color-neutral-300: #9fa8b2;
  --color-pink-300: #e085f4;
  --color-pink-500: #ae3ec9;
  --color-blue-500: #4465e9;
  --color-neutral-900: #0c0d0e;
  --color-neutral-500: #6e7477;
  --color-neutral-100: #edf0f2;
  --color-neutral-700-1: #323334;
  --color-neutral-50-2: #ffffff;
  --color-neutral-700-2: #2e2e2e;
  --color-blue-400: #4ba1f1;

  /* surfaces */
  --color-surface-0: #ffffff;
  --color-surface-1: #edf0f2;
  --color-surface-2: #9fa8b2;
  --color-surface-3: #6e7477;
  --color-surface-4: #323334;

  /* fonts */
  --font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* type scale (utilities: text-{role}, leading-{role}, tracking-{role}) */
  --text-display: 24px;
  --text-display--line-height: 1.6;
  --text-display--letter-spacing: nullpx;
  --text-body: 12px;
  --text-body--line-height: 1.6;
  --text-body--letter-spacing: nullpx;
  --text-link: 12px;
  --text-link--line-height: 1.6;
  --text-link--letter-spacing: nullpx;
  --text-ui-action: 12px;
  --text-ui-action--line-height: 1.6;
  --text-ui-action--letter-spacing: nullpx;

  /* radii (utilities: rounded-{name}) */
  --radius-none: 0;
  --radius-lg: 9px;

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