/** All CSS custom property names that apps must define in their theme */
export const THEME_TOKENS = {
  colors: [
    '--background',
    '--foreground',
    '--card',
    '--card-foreground',
    '--popover',
    '--popover-foreground',
    '--primary',
    '--primary-foreground',
    '--secondary',
    '--secondary-foreground',
    '--muted',
    '--muted-foreground',
    '--accent',
    '--accent-foreground',
    '--destructive',
    '--destructive-foreground',
    '--border',
    '--input',
    '--ring',
  ],
  shape: [
    '--radius',
    '--radius-sm',
    '--radius-md',
    '--radius-lg',
    '--radius-xl',
    '--radius-full',
  ],
  shadows: ['--shadow-sm', '--shadow-md', '--shadow-lg', '--shadow-xl'],
  typography: ['--font-sans', '--font-mono', '--font-heading'],
  animation: ['--duration-fast', '--duration-normal', '--duration-slow', '--easing-default'],
  borders: ['--border-width'],
} as const

export type ThemeColorTokens = (typeof THEME_TOKENS.colors)[number]
export type ThemeShapeTokens = (typeof THEME_TOKENS.shape)[number]
export type ThemeToken =
  | ThemeColorTokens
  | ThemeShapeTokens
  | (typeof THEME_TOKENS.shadows)[number]
  | (typeof THEME_TOKENS.typography)[number]
  | (typeof THEME_TOKENS.animation)[number]
  | (typeof THEME_TOKENS.borders)[number]