Design Token Calculator

@import "tailwindcss";

@theme {
  /* Typography Scale */
  --text-xs: 0.640rem; /* 10.24px */
  --text-sm: 0.800rem; /* 12.80px */
  --text-base: 1.000rem; /* 16.00px */
  --text-lg: 1.250rem; /* 20.00px */
  --text-xl: 1.563rem; /* 25.00px */
  --text-2xl: 1.953rem; /* 31.25px */
  --text-3xl: 2.441rem; /* 39.06px */
  --text-4xl: 3.052rem; /* 48.83px */
  --text-5xl: 3.815rem; /* 61.04px */

  /* Spacing Scale */
  --spacing-0_5: 0.125rem; /* 2px */
  --spacing-1: 0.250rem; /* 4px */
  --spacing-1_5: 0.375rem; /* 6px */
  --spacing-2: 0.500rem; /* 8px */
  --spacing-2_5: 0.625rem; /* 10px */
  --spacing-3: 0.750rem; /* 12px */
  --spacing-4: 1.000rem; /* 16px */
  --spacing-5: 1.250rem; /* 20px */
  --spacing-6: 1.500rem; /* 24px */
  --spacing-8: 2.000rem; /* 32px */
  --spacing-10: 2.500rem; /* 40px */
  --spacing-12: 3.000rem; /* 48px */
  --spacing-16: 4.000rem; /* 64px */
  --spacing-20: 5.000rem; /* 80px */
  --spacing-24: 6.000rem; /* 96px */
}

/* Usage: text-lg, text-xl, text-2xl, etc. */
/* Usage: p-4, m-8, gap-2, etc. */