export const darkTheme = {
  colors: {
    bgPrimary: '#0B0F15',
    bgSecondary: '#1D232B',
    bgTertiary: '#303740',
    surfaceLight: '#1E232A',
    surfaceLighter: '#282F39',
    textPrimary: '#FFFFFFE6',
    textSecondary: '#FFFFFFB8',
    textDisabled: '#FFFFFF61',
    textInvert: 'rgba(0,0,0,0.9)',
    textHighEmp: '#F5F9FFF2',
    textMedEmp: 'rgba(224, 236, 255, 0.8)',
    iconBtn: '$white',
    iconHoverBg: 'rgba(255, 255, 255, 0.25)',
    transparentBg: 'rgba(0, 0, 0, 0.22)',
    mainBg: '$black',
    tileBg: '#0F1115',
    secondaryDisabled: '#242A33',
    previewBg: '#111111',
    statsBg: 'rgba(0,0,0,0.75)',
    menuBg: '$grayDark',
    inputBg: '$bgSecondary',
    toastBg: '$menuBg',
    borderDefault: '#1B1F26',
    backgroundDefault: '#0B0D0F',
    borderLighter: '#2D3440',
  },
};

// TODO: Update light theme colors from design
export const lightTheme = {
  colors: {
    bgPrimary: '$white',
    bgSecondary: '#F5F5F5',
    bgTertiary: '#FFFFFF61',
    twinYellow: '#ECC502',
    textPrimary: 'rgba(0,0,0, 0.9)',
    textSecondary: 'rgba(0,0,0, 0.72)',
    textInvert: '#FFFFFFE6',
    iconBtn: '#3b3b3b',
    iconHoverBg: 'rgba(0, 0, 0, 0.22)',
    transparentBg: '#FFFFFF38',
    mainBg: '$white',
    tileBg: '#F2F2F2',
    previewBg: '#FAFAFA',
    statsBg: '#FFFFFFBF',
    menuBg: '#d9d9d9',
    inputBg: '$tileBg',
    toastBg: '$menuBg',
    secondaryDisabled: '#F6F7F9',
    // text variants
    textHighEmp: '#000000F2',
    textMedEmp: '#000000CC',
    textDisabled: '#00000066',

    borderDefault: '#DDE2E9',
    borderLight: '#BCC4D2',
    borderLighter: '#DFE4EC',
    surfaceDefault: '#EDEFF3',
    surfaceLight: '#F6F7F9',
    surfaceLighter: '#FCFCFD',
    surfaceDark: '$surfaceLight',
    backgroundDefault: '#E0E4EB',
    backgroundDark: '#DADFE7',
    backgroundDarker: '#D4DAE2',
  },
};

// Modals -> surface light/er