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

const emaPrimary: MantineColorsTuple = [
  '#eff6ff', '#dbeafe', '#bfdbfe', '#93c5fd', '#60a5fa',
  '#3b82f6', '#2563eb', '#1d4ed8', '#1e40af', '#1e3a8a',
];

const emaSecondary: MantineColorsTuple = [
  '#fdf8f6', '#f2e8e5', '#eaddd7', '#e0cec7', '#d2bab0',
  '#bfa094', '#a18072', '#977669', '#65524d', '#2c1f1a',
];

export const emaTheme = createTheme({
  primaryColor: 'emaPrimary',
  colors: {
    emaPrimary,
    emaSecondary,
  },
  fontFamily: 'Inter, sans-serif',
  defaultRadius: 'md',
  breakpoints: {
    xs: '36em',
    sm: '48em',
    md: '62em',
    lg: '75em',
    xl: '88em',
  },
  shadows: {
    xs: '0 1px 3px rgba(0,0,0,0.05)',
    sm: '0 1px 5px rgba(0,0,0,0.07)',
    md: '0 4px 20px rgba(15,23,42,0.08)',
    lg: '0 8px 30px rgba(15,23,42,0.12)',
  },
  components: {
    // Mantine's stock scroll wrapper (NativeScrollArea) discards the
    // max-height it's handed unless scrollAreaComponent is set, so a modal
    // taller than the viewport just gets clipped with no way to scroll it.
    // Making the body the scrollport here fixes every Modal/Drawer at once.
    Modal: {
      styles: {
        content: { display: 'flex', flexDirection: 'column', maxHeight: '90dvh' },
        body: { flex: '1 1 auto', minHeight: 0, overflowY: 'auto' },
      },
    },
    Drawer: {
      styles: {
        content: { display: 'flex', flexDirection: 'column' },
        body: { flex: '1 1 auto', minHeight: 0, overflowY: 'auto' },
      },
    },
  },
  other: {
    heroGradient: 'linear-gradient(135deg, #3160b7 0%, #1fc29d 100%)',
  },
});
