export const tokens = {
  colors: {
    white: '#ffffff',
    black: '#000000',
    gray: {
      100: '#f8fafc',
      200: '#e2e8f0',
      300: '#cbd5e1',
      500: '#64748b',
      700: '#334155',
      900: '#0f172a',
    },
    darkGray: {
      600: '#475569',
      700: '#334155',
      800: '#1e293b',
      900: '#0f172a',
    },
    red: {
      300: '#fca5a5',
      500: '#ef4444',
      700: '#b91c1c',
    },
    blue: {
      300: '#93c5fd',
      500: '#3b82f6',
      700: '#1d4ed8',
    },
  },
  alpha: {
    20: '33',
  },
  size: {
    1: '4px',
    2: '8px',
    3: '12px',
    4: '16px',
  },
  border: {
    radius: {
      sm: '4px',
      md: '6px',
      lg: '8px',
    },
  },
  font: {
    size: {
      xs: '11px',
      sm: '12px',
      md: '14px',
    },
    weight: {
      normal: 400,
      semibold: 600,
      bold: 700,
    },
    family: {
      sans: 'ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif',
      mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
    },
  },
}