// design-tokens/colors.ts
export const colors = {
  // Primary Brand Colors
  primary: {
    50: 'hsl(214, 100%, 97%)',
    100: 'hsl(214, 95%, 93%)',
    200: 'hsl(213, 97%, 87%)',
    300: 'hsl(212, 96%, 78%)',
    400: 'hsl(213, 94%, 68%)',
    500: 'hsl(217, 91%, 60%)', // Main brand color
    600: 'hsl(221, 83%, 53%)',
    700: 'hsl(224, 76%, 48%)',
    800: 'hsl(226, 71%, 40%)',
    900: 'hsl(224, 64%, 33%)',
    950: 'hsl(226, 55%, 21%)',
  },

  // Semantic Colors
  semantic: {
    success: {
      50: 'hsl(151, 81%, 96%)',
      500: 'hsl(151, 55%, 53%)',
      600: 'hsl(151, 55%, 43%)',
      700: 'hsl(151, 55%, 33%)',
    },
    warning: {
      50: 'hsl(48, 100%, 96%)',
      500: 'hsl(38, 92%, 50%)',
      600: 'hsl(32, 95%, 44%)',
      700: 'hsl(26, 90%, 37%)',
    },
    error: {
      50: 'hsl(0, 86%, 97%)',
      500: 'hsl(0, 84%, 60%)',
      600: 'hsl(0, 72%, 51%)',
      700: 'hsl(0, 74%, 42%)',
    },
  },

  // Neutral Grays
  neutral: {
    50: 'hsl(210, 40%, 98%)',
    100: 'hsl(210, 40%, 96%)',
    200: 'hsl(214, 32%, 91%)',
    300: 'hsl(213, 27%, 84%)',
    400: 'hsl(215, 20%, 65%)',
    500: 'hsl(215, 16%, 47%)',
    600: 'hsl(215, 19%, 35%)',
    700: 'hsl(215, 25%, 27%)',
    800: 'hsl(217, 33%, 17%)',
    900: 'hsl(222, 84%, 5%)',
  },
} as const;

// Tailwind CSS configuration
// tailwind.config.ts
export default {
  theme: {
    colors: {
      primary: colors.primary,
      success: colors.semantic.success,
      warning: colors.semantic.warning,
      error: colors.semantic.error,
      gray: colors.neutral,
      // Dark mode automatically handled by Tailwind
    },
  },
};

// design-tokens/typography.ts
export const typography = {
  fontFamily: {
    sans: ['Inter', 'system-ui', 'sans-serif'],
    mono: ['JetBrains Mono', 'monospace'],
  },

  fontSize: {
    xs: ['0.75rem', { lineHeight: '1rem' }],     // 12px
    sm: ['0.875rem', { lineHeight: '1.25rem' }], // 14px
    base: ['1rem', { lineHeight: '1.5rem' }],    // 16px
    lg: ['1.125rem', { lineHeight: '1.75rem' }], // 18px
    xl: ['1.25rem', { lineHeight: '1.75rem' }],  // 20px
    '2xl': ['1.5rem', { lineHeight: '2rem' }],   // 24px
    '3xl': ['1.875rem', { lineHeight: '2.25rem' }], // 30px
    '4xl': ['2.25rem', { lineHeight: '2.5rem' }],   // 36px
    '5xl': ['3rem', { lineHeight: '1' }],           // 48px
    '6xl': ['3.75rem', { lineHeight: '1' }],        // 60px
  },

  fontWeight: {
    normal: '400',
    medium: '500',
    semibold: '600',
    bold: '700',
  },

  // Responsive typography using clamp()
  fluidTypography: {
    h1: 'clamp(2.25rem, 4vw, 3.75rem)', // 36px - 60px
    h2: 'clamp(1.875rem, 3vw, 3rem)',   // 30px - 48px
    h3: 'clamp(1.5rem, 2.5vw, 2.25rem)', // 24px - 36px
    h4: 'clamp(1.25rem, 2vw, 1.5rem)',   // 20px - 24px
    body: 'clamp(1rem, 1.5vw, 1.125rem)', // 16px - 18px
  },
} as const;

// CSS Custom Properties for fluid typography
// styles/globals.css
:root {
  --font-h1: clamp(2.25rem, 4vw, 3.75rem);
  --font-h2: clamp(1.875rem, 3vw, 3rem);
  --font-h3: clamp(1.5rem, 2.5vw, 2.25rem);
  --font-h4: clamp(1.25rem, 2vw, 1.5rem);
  --font-body: clamp(1rem, 1.5vw, 1.125rem);
}

.text-fluid-h1 { font-size: var(--font-h1); }
.text-fluid-h2 { font-size: var(--font-h2); }
.text-fluid-h3 { font-size: var(--font-h3); }
.text-fluid-h4 { font-size: var(--font-h4); }
.text-fluid-body { font-size: var(--font-body); }

// design-tokens/spacing.ts
export const spacing = {
  0: '0',
  px: '1px',
  0.5: '0.125rem',  // 2px
  1: '0.25rem',     // 4px
  1.5: '0.375rem',  // 6px
  2: '0.5rem',      // 8px
  2.5: '0.625rem',  // 10px
  3: '0.75rem',     // 12px
  3.5: '0.875rem',  // 14px
  4: '1rem',        // 16px
  5: '1.25rem',     // 20px
  6: '1.5rem',      // 24px
  7: '1.75rem',    // 28px
  8: '2rem',        // 32px
  9: '2.25rem',     // 36px
  10: '2.5rem',     // 40px
  11: '2.75rem',    // 44px
  12: '3rem',       // 48px
  14: '3.5rem',     // 56px
  16: '4rem',       // 64px
  20: '5rem',       // 80px
  24: '6rem',       // 96px
  28: '7rem',       // 112px
  32: '8rem',       // 128px
} as const;

// Layout tokens
export const layout = {
  // Breakpoints
  breakpoints: {
    sm: '640px',   // Small tablets
    md: '768px',   // Large tablets
    lg: '1024px',  // Laptops
    xl: '1280px',  // Desktops
    '2xl': '1536px', // Large screens
  },

  // Container sizes
  container: {
    sm: '640px',
    md: '768px',
    lg: '1024px',
    xl: '1280px',
    '2xl': '1400px',
  },

  // Z-index scale
  zIndex: {
    dropdown: 1000,
    sticky: 1020,
    fixed: 1030,
    modal: 1040,
    popover: 1050,
    tooltip: 1060,
    toast: 1070,
  },

  // Border radius scale
  borderRadius: {
    none: '0',
    sm: '0.125rem',   // 2px
    DEFAULT: '0.25rem', // 4px
    md: '0.375rem',   // 6px
    lg: '0.5rem',     // 8px
    xl: '0.75rem',    // 12px
    '2xl': '1rem',    // 16px
    '3xl': '1.5rem',  // 24px
    full: '9999px',
  },
} as const;