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

export const theme = createTheme({
  colors: {
    // Definición de la paleta principal
    brand: [
      "#e7f2ff",
      "#d0e1ff",
      "#a1c0fa",
      "#6e9df6",
      "#447ff1",
      "#296df0",
      "#1863f0",
      "#0753d6",
      "#0049c1",
      "#003faa"
    ],
    // Puedes añadir hasta 3 colores adicionales si lo deseas
    secondary: [
      "#ecf4ff",
      "#dce4f5",
      "#b9c7e2",
      "#94a8d0",
      "#748dc0",
      "#5f7cb7",
      "#5474b4",
      "#44639f",
      "#3a5890",
      "#2c4b80"
    ],
    accent: [
      '#fff3e0',
      '#ffe0b2',
      '#ffcc80',
      '#ffb74d',
      '#ffa726',
      '#ff9800',
      '#fb8c00',
      '#f57c00',
      '#ef6c00',
      '#e65100',
    ],
    neutral: [
      '#fafafa',
      '#f5f5f5',
      '#eeeeee',
      '#e0e0e0',
      '#bdbdbd',
      '#9e9e9e',
      '#757575',
      '#616161',
      '#424242',
      '#212121',
    ],
  },
  primaryColor: 'brand', // Establece 'brand' como el color primario
  primaryShade: { light: 6, dark: 8 }, // Define los tonos primarios para los esquemas de color claro y oscuro
});