// Design tokens configuration
// This file serves as the single source of truth for design tokens
// It is used to generate CSS design tokens in ./tokens.css and display tokens in Tokens.stories.tsx

export type TokenValue = {
  light: string
  dark: string
  twClassName?: string
}

type TokenCategory = {
  [tokenName: string]: TokenValue
}

type TokensObject = {
  [category: string]: TokenCategory
}

export const tokens: TokensObject = {
  Background: {
    background: {
      light: 'var(--white)',
      dark: 'var(--gray-900)',
    },
    'background-alt': {
      light: 'var(--gray-50)',
      dark: 'var(--gray-950)',
    },
  },
  Foreground: {
    foreground: {
      light: 'var(--gray-900)',
      dark: 'var(--white)',
    },
    link: {
      light: 'var(--blue-500)',
      dark: 'var(--blue-400)',
    },
    brand: {
      light: 'var(--blue-700)',
      dark: 'var(--blue-500)',
    },
  },
  Muted: {
    muted: {
      light: 'var(--gray-100)',
      dark: 'var(--gray-800)',
    },
    'muted-more': {
      light: 'var(--gray-200)',
      dark: 'var(--gray-700)',
    },
    'muted-foreground': {
      light: 'var(--gray-500)',
      dark: 'var(--gray-400)',
    },
    'muted-more-foreground': {
      light: 'var(--gray-400)',
      dark: 'var(--gray-500)',
    },
    'muted-on-surface': {
      light: 'var(--white)',
      dark: 'var(--gray-800)',
    },
    'muted-on-popover': {
      light: 'var(--gray-100)',
      dark: 'var(--gray-800)',
    },
  },
  Border: {
    border: {
      light: 'var(--gray-200)',
      dark: 'var(--gray-800)',
    },
    'border-muted': {
      light: 'var(--gray-100)',
      dark: 'var(--gray-900)',
    },
    'border-hover': {
      light: 'var(--gray-300)',
      dark: 'var(--gray-500)',
    },
    'border-active': {
      light: 'var(--gray-400)',
      dark: 'var(--gray-600)',
    },
  },
  Input: {
    input: {
      light: 'var(--white)',
      dark: 'var(--gray-900)',
    },
    'input-disabled': {
      light: 'var(--gray-50)',
      dark: 'var(--gray-900)',
    },
    'input-border': {
      light: 'var(--gray-300)',
      dark: 'var(--gray-600)',
    },
    'input-border-disabled': {
      light: 'var(--gray-200)',
      dark: 'var(--gray-800)',
    },
    'input-border-hover': {
      light: 'var(--gray-400)',
      dark: 'var(--gray-500)',
    },
    'input-border-active': {
      light: 'var(--gray-500)',
      dark: 'var(--gray-400)',
    },
    'input-border-error': {
      light: 'var(--red-300)',
      dark: 'var(--red-900)',
    },
    'input-foreground': {
      light: 'var(--gray-900)',
      dark: 'var(--gray-300)',
    },
    'input-muted-foreground': {
      light: 'var(--gray-400)',
      dark: 'var(--gray-500)',
    },
    'input-muted-more-foreground': {
      light: 'var(--gray-300)',
      dark: 'var(--gray-700)',
    },
  },
  Primary: {
    primary: {
      light: 'var(--blue-700)',
      dark: 'var(--blue-500)',
    },
    'primary-hover': {
      light: 'var(--blue-800)',
      dark: 'var(--blue-700)',
    },
    'primary-disabled': {
      light: 'var(--blue-300)',
      dark: 'var(--blue-950)',
    },
    'primary-foreground': {
      light: 'var(--white)',
      dark: 'var(--white)',
    },
    'primary-disabled-foreground': {
      light: 'var(--white)',
      dark: 'var(--blue-700)',
    },
  },
  Secondary: {
    secondary: {
      light: 'transparent',
      dark: 'transparent',
    },
    'secondary-border': {
      light: 'var(--blue-400)',
      dark: 'var(--blue-800)',
    },
    'secondary-border-hover': {
      light: 'var(--blue-700)',
      dark: 'var(--blue-500)',
    },
    'secondary-border-disabled': {
      light: 'var(--blue-300)',
      dark: 'var(--blue-900)',
    },
    'secondary-foreground': {
      light: 'var(--blue-700)',
      dark: 'var(--blue-500)',
    },
    'secondary-disabled-foreground': {
      light: 'var(--blue-400)',
      dark: 'var(--blue-900)',
    },
  },
  Tertiary: {
    tertiary: {
      light: 'transparent',
      dark: 'transparent',
    },
    'tertiary-border': {
      light: 'var(--gray-300)',
      dark: 'var(--gray-800)',
    },
    'tertiary-border-hover': {
      light: 'var(--gray-400)',
      dark: 'var(--gray-500)',
    },
    'tertiary-border-disabled': {
      light: 'var(--gray-200)',
      dark: 'var(--gray-700)',
    },
    'tertiary-foreground': {
      light: 'var(--gray-950)',
      dark: 'var(--gray-50)',
    },
    'tertiary-disabled-foreground': {
      light: 'var(--gray-400)',
      dark: 'var(--gray-600)',
    },
  },
  'Button / Destructive': {
    destructive: {
      light: 'var(--red-600)',
      dark: 'var(--red-500)',
    },
    'destructive-hover': {
      light: 'var(--red-800)',
      dark: 'var(--red-700)',
    },
    'destructive-disabled': {
      light: 'var(--red-300)',
      dark: 'var(--red-950)',
    },
    'destructive-foreground': {
      light: 'var(--white)',
      dark: 'var(--white)',
    },
    'destructive-disabled-foreground': {
      light: 'var(--red-100)',
      dark: 'var(--red-700)',
    },
  },
  Ghost: {
    ghost: {
      light: 'var(--gray-100)',
      dark: 'var(--gray-900)',
    },
    'ghost-hover': {
      light: 'var(--gray-200)',
      dark: 'var(--gray-800)',
    },
    'ghost-disabled': {
      light: 'var(--gray-50)',
      dark: 'var(--gray-950)',
    },
    'ghost-foreground': {
      light: 'var(--gray-950)',
      dark: 'var(--gray-50)',
    },
    'ghost-disabled-foreground': {
      light: 'var(--gray-500)',
      dark: 'var(--gray-600)',
    },
  },
  Progress: {
    progress: {
      light: 'var(--blue-50)',
      dark: 'var(--blue-950)',
    },
    'progress-muted': {
      light: 'var(--blue-100)',
      dark: 'var(--blue-900)',
    },
    'progress-border': {
      light: 'var(--blue-200)',
      dark: 'var(--blue-900)',
    },
    'progress-foreground': {
      light: 'var(--blue-600)',
      dark: 'var(--blue-500)',
    },
    'progress-muted-foreground': {
      light: 'var(--blue-400)',
      dark: 'var(--blue-900)',
    },
  },
  Success: {
    success: {
      light: 'var(--green-50)',
      dark: 'var(--green-950)',
    },
    'success-muted': {
      light: 'var(--green-100)',
      dark: 'var(--green-900)',
    },
    'success-border': {
      light: 'var(--green-200)',
      dark: 'var(--green-900)',
    },
    'success-foreground': {
      light: 'var(--green-600)',
      dark: 'var(--green-600)',
    },
    'success-muted-foreground': {
      light: 'var(--green-400)',
      dark: 'var(--green-900)',
    },
  },
  Warning: {
    warning: {
      light: 'var(--yellow-50)',
      dark: 'var(--yellow-950)',
    },
    'warning-muted': {
      light: 'var(--yellow-100)',
      dark: 'var(--yellow-900)',
    },
    'warning-border': {
      light: 'var(--yellow-200)',
      dark: 'var(--yellow-900)',
    },
    'warning-foreground': {
      light: 'var(--yellow-600)',
      dark: 'var(--yellow-500)',
    },
    'warning-muted-foreground': {
      light: 'var(--yellow-400)',
      dark: 'var(--yellow-900)',
    },
  },
  Error: {
    error: {
      light: 'var(--red-50)',
      dark: 'var(--red-950)',
    },
    'error-muted': {
      light: 'var(--red-100)',
      dark: 'var(--red-900)',
    },
    'error-border': {
      light: 'var(--red-300)',
      dark: 'var(--red-900)',
    },
    'error-foreground': {
      light: 'var(--red-600)',
      dark: 'var(--red-500)',
    },
    'error-muted-foreground': {
      light: 'var(--red-400)',
      dark: 'var(--red-900)',
    },
  },
  Card: {
    card: {
      light: 'var(--white)',
      dark: 'var(--gray-900)',
    },
    'card-alt': {
      light: 'var(--blue-50)',
      dark: 'var(--blue-950)',
    },
    'card-border': {
      light: 'var(--gray-200)',
      dark: 'var(--gray-800)',
    },
    'card-foreground': {
      light: 'var(--gray-950)',
      dark: 'var(--gray-200)',
    },
    'card-muted-foreground': {
      light: 'var(--gray-400)',
      dark: 'var(--gray-700)',
    },
    'card-icon-background': {
      light: 'var(--blue-100)',
      dark: 'var(--blue-900)',
    },
  },
  Toggle: {
    'toggle-on': {
      light: 'var(--green-500)',
      dark: 'var(--green-300)',
    },
    'toggle-off': {
      light: 'var(--gray-200)',
      dark: 'var(--gray-700)',
    },
  },
  Counter: {
    counter: {
      light: 'var(--blue-600)',
      dark: 'var(--blue-600)',
    },
    'counter-foreground': {
      light: 'var(--white)',
      dark: 'var(--white)',
    },
  },
  Popover: {
    popover: {
      light: 'var(--gray-950)',
      dark: 'var(--gray-700)',
    },
    'popover-foreground': {
      light: 'var(--white)',
      dark: 'var(--white)',
    },
    'popover-muted-foreground': {
      light: 'var(--gray-400)',
      dark: 'var(--gray-300)',
    },
  },
  'Side Panel Button': {
    'side-panel-button': {
      light: 'var(--gray-900)',
      dark: 'var(--gray-900)',
    },
    'side-panel-button-foreground': {
      light: 'var(--white)',
      dark: 'var(--white)',
    },
    'side-panel-button-muted-foreground': {
      light: 'var(--gray-500)',
      dark: 'var(--gray-500)',
    },
  },
  'Segment Button': {
    'segment-button-active': {
      light: 'var(--blue-100)',
      dark: 'var(--blue-900)',
    },
    'segment-button-border': {
      light: 'var(--gray-200)',
      dark: 'var(--gray-700)',
    },
    'segment-button-foreground': {
      light: 'var(--gray-600)',
      dark: 'var(--gray-500)',
    },
    'segment-button-active-foreground': {
      light: 'var(--blue-950)',
      dark: 'var(--white)',
    },
    'segment-button-background': {
      light: 'var(--white)',
      dark: 'var(--gray-900)',
    },
    'segment-button-background-hover': {
      light: 'var(--gray-50)',
      dark: 'var(--gray-950)',
    },
  },
  'Platform Navigation': {
    'platform-navigation-active': {
      light: 'var(--gray-50)',
      dark: 'var(--gray-800)',
    },
    'platform-navigation-hover': {
      light: 'var(--gray-100)',
      dark: 'var(--gray-950)',
    },
    'platform-navigation-foreground': {
      light: 'var(--gray-500)',
      dark: 'var(--gray-400)',
    },
    'platform-navigation-muted-foreground': {
      light: 'var(--gray-400)',
      dark: 'var(--gray-500)',
    },
    'platform-navigation-muted-more-foreground': {
      light: 'var(--gray-300)',
      dark: 'var(--gray-600)',
    },
    'platform-navigation-active-foreground': {
      light: 'var(--gray-900)',
      dark: 'var(--gray-100)',
    },
    'platform-navigation-active-brand-foreground': {
      light: 'var(--blue-700)',
      dark: 'var(--blue-400)',
    },
    'platform-navigation-hover-foreground': {
      light: 'var(--gray-800)',
      dark: 'var(--gray-200)',
    },
  },
  Ring: {
    ring: {
      light: 'var(--gray-400)',
      dark: 'var(--gray-400)',
    },
  },
  Accent: {
    accent: {
      light: 'var(--gray-100)',
      dark: 'var(--gray-800)',
    },
  },
  Disabled: {
    disabled: {
      light: 'var(--gray-50)',
      dark: 'var(--gray-950)',
    },
  },
  Pill: {
    pill: {
      light: 'var(--gray-50)',
      dark: 'var(--gray-950)',
    },
    'pill-hover': {
      light: 'var(--gray-200)',
      dark: 'var(--gray-800)',
    },
    'pill-active': {
      light: 'var(--gray-500)',
      dark: 'var(--blue-300)',
    },
    'pill-border': {
      light: 'var(--gray-200)',
      dark: 'var(--gray-800)',
    },
    'pill-border-hover': {
      light: 'var(--gray-300)',
      dark: 'var(--gray-700)',
    },
    'pill-foreground': {
      light: 'var(--gray-700)',
      dark: 'var(--gray-50)',
    },
    'pill-active-foreground': {
      light: 'var(--gray-50)',
      dark: 'var(--gray-950)',
    },
  },
  'Platform Ad': {
    'platform-ad': {
      light: 'var(--purple-100)',
      dark: 'var(--purple-900)',
    },
    'platform-ad-border': {
      light: 'var(--purple-200)',
      dark: 'var(--purple-800)',
    },
    'platform-ad-foreground': {
      light: 'var(--purple-900)',
      dark: 'var(--purple-100)',
    },
    'platform-ad-link': {
      light: 'var(--purple-500)',
      dark: 'var(--purple-500)',
    },
    'platform-ad-link-hover': {
      light: 'var(--purple-700)',
      dark: 'var(--purple-300)',
    },
  },
  Chart: {
    'chart-blue': {
      light: 'var(--blue-400)',
      dark: 'var(--blue-400)',
    },
    'chart-green': {
      light: 'var(--green-400)',
      dark: 'var(--green-400)',
    },
    'chart-yellow': {
      light: 'var(--yellow-400)',
      dark: 'var(--yellow-400)',
    },
    'chart-purple': {
      light: 'var(--purple-400)',
      dark: 'var(--purple-400)',
    },
    'chart-teal': {
      light: 'var(--teal-400)',
      dark: 'var(--teal-400)',
    },
    'chart-orange': {
      light: 'var(--orange-400)',
      dark: 'var(--orange-400)',
    },
    'chart-red': {
      light: 'var(--red-400)',
      dark: 'var(--red-400)',
    },
  },
  'Stepper Counter': {
    'stepper-counter-active': {
      light: 'var(--blue-700)',
      dark: 'var(--blue-500)',
    },
    'stepper-counter-track-active': {
      light: 'var(--blue-500)',
      dark: 'var(--blue-500)',
    },
    'stepper-counter-done': {
      light: 'var(--blue-500)',
      dark: 'var(--blue-700)',
    },
    'stepper-counter-pending-background': {
      light: 'var(--gray-300)',
      dark: 'var(--gray-700)',
    },
    'stepper-counter-pending-foreground': {
      light: 'var(--gray-800)',
      dark: 'var(--gray-50)',
    },
    'stepper-counter-error': {
      light: 'var(--red-600)',
      dark: 'var(--red-600)',
    },
    'stepper-counter-foreground': {
      light: 'var(--white)',
      dark: 'var(--white)',
    },
    'stepper-counter-track-pending': {
      light: 'var(--gray-300)',
      dark: 'var(--gray-800)',
    },
  },
}