import { createTheme, rem } from '@mantine/core';

export const theme = createTheme({
  /** Color system for the application */
  colors: {
    // Primary brand color (blue shades from inventory with consistent gradation)
    'brand-primary': [
      '#EAF4FF', // 0: Lightest shade
      '#D5E9FF', // 1
      '#B0D3FF', // 2
      '#8BBDFF', // 3
      '#66A7FF', // 4: Base blue shade
      '#4191FF', // 5
      '#1C7BFF', // 6
      '#0065F2', // 7: Original blue-7 shade
      '#0055CC', // 8
      '#004099', // 9: Darkest shade
    ],

    // Secondary brand color - a complementary shade to the primary
    'brand-secondary': [
      '#F0F4F9', // 0
      '#E1E9F4', // 1
      '#C3D4E9', // 2
      '#A5BFDE', // 3
      '#87AAD3', // 4
      '#6995C8', // 5
      '#4B80BD', // 6
      '#2D6BB2', // 7
      '#1F5A99', // 8
      '#114480', // 9
    ],

    // Accent color for highlights, call to actions, important elements
    'brand-accent': [
      '#FFF0EA', // 0
      '#FFE1D5', // 1
      '#FFC3AD', // 2
      '#FFA584', // 3
      '#FF875B', // 4
      '#FF6932', // 5
      '#FF4A09', // 6
      '#D93A00', // 7
      '#B02F00', // 8
      '#882400', // 9
    ],

    // Standardized gray shades for consistency
    'brand-gray': [
      '#F8F9FA', // 0
      '#F1F3F5', // 1
      '#E9ECEF', // 2
      '#DEE2E6', // 3
      '#CED4DA', // 4
      '#ADB5BD', // 5
      '#868E96', // 6
      '#495057', // 7
      '#343A40', // 8
      '#212529', // 9
    ],

    // Semantic colors for state indications
    success: [
      '#EAFAF1', // 0
      '#D5F5E3', // 1
      '#ABEBC6', // 2
      '#82E0AA', // 3
      '#58D68D', // 4
      '#2ECC71', // 5
      '#27AE60', // 6
      '#229954', // 7
      '#1E8449', // 8
      '#196F3D', // 9
    ],

    warning: [
      '#FEF9E7', // 0
      '#FCF3CF', // 1
      '#F9E79F', // 2
      '#F7DC6F', // 3
      '#F4D03F', // 4
      '#F1C40F', // 5
      '#D4AC0D', // 6
      '#B7950B', // 7
      '#9A7D0A', // 8
      '#7D6608', // 9
    ],

    error: [
      '#FDEDEC', // 0
      '#FADBD8', // 1
      '#F5B7B1', // 2
      '#F1948A', // 3
      '#EC7063', // 4
      '#E74C3C', // 5
      '#CB4335', // 6
      '#B03A2E', // 7
      '#943126', // 8
      '#78281F', // 9
    ],
  },

  // Set the primary color to our brand-primary
  primaryColor: 'brand-primary',

  // Add consistent spacing values
  spacing: {
    xs: rem(4),
    sm: rem(8),
    md: rem(16),
    lg: rem(24),
    xl: rem(32),
    '2xl': rem(40),
    '3xl': rem(64),
  },

  // Add consistent border radius values
  radius: {
    xs: rem(2),
    sm: rem(4),
    md: rem(8),
    lg: rem(16),
    xl: rem(24),
  },

  // Other theme customizations
  fontFamily:
    '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',

  // Add semantic tokens for common elements
  other: {
    headerBgColor: 'var(--mantine-color-body)',
    headerBorderColor: 'var(--mantine-color-brand-gray-3)',
    navigationActiveColor: 'var(--mantine-color-brand-primary-6)',
    navigationHoverColor: 'var(--mantine-color-brand-primary-0)',
    buttonPrimaryBg: 'var(--mantine-color-brand-primary-6)',
    buttonSecondaryBg: 'var(--mantine-color-brand-secondary-6)',
    buttonAccentBg: 'var(--mantine-color-brand-accent-6)',
  },
});