import { extendTheme, ThemeConfig } from '@chakra-ui/react';

const config: ThemeConfig = {
  initialColorMode: 'light',
  useSystemColorMode: false,
};

// For now we use a simple blue theme. In a next step, we can hydrate colors
// from the main MyClub settings API so the e-shop matches club branding.
export const theme = extendTheme({
  config,
  colors: {
    brand: {
      50: '#e3f2ff',
      100: '#b9d4ff',
      200: '#8fb7ff',
      300: '#6599ff',
      400: '#3b7cff',
      500: '#1a5fe6',
      600: '#1449b4',
      700: '#0e3382',
      800: '#071d51',
      900: '#020720',
    },
  },
  styles: {
    global: {
      body: {
        bg: 'gray.50',
      },
    },
  },
});