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

export const theme = createTheme({
  colors: {
    // Definición de la paleta principal
    brand: [
      "#ffeaff",
      "#fdd3fc",
      "#f6a5f3",
      "#ef74eb",
      "#e841e2",
      "#e631e0",
      "#e521de",
      "#cc12c5",
      "#b608b1",
      "#9f009b"
    ],
    // Puedes añadir hasta 3 colores adicionales si lo deseas
    secondary: [
      "#f7ecff",
      "#e7d6fb",
      "#caaaf1",
      "#ac7ce8",
      "#9354e0",
      "#833bdb",
      "#7b2eda",
      "#6921c2",
      "#5d1cae",
      "#501599"
    ],
    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
});