import { createTheme, mergeThemeOverrides } from '@mantine/core';
import { baseTheme } from './base-theme';
import { emaCoastalBlue, emaGray, emaTeal } from './palettes';

/**
 * Portal theme — "Coastal Modern".
 *
 * Structure comes from `baseTheme` (which this theme's own structure was the
 * source of, so nothing here changes visually). What remains is the brand: a
 * softer blue than the backoffice, a teal accent, and cool blue-tinted
 * neutrals in place of Mantine's stock gray.
 *
 * The gray override stays portal-only for now. It is the widest-reaching
 * single line in either theme — it retints every dimmed label, neutral badge
 * and table border — so the backoffice adopts it as its own reviewed change,
 * not as a side effect of sharing a base.
 */
export const portalTheme = mergeThemeOverrides(
  baseTheme,
  createTheme({
    primaryColor: 'emaPrimary',
    primaryShade: { light: 6, dark: 5 },
    colors: {
      emaPrimary: emaCoastalBlue,
      emaTeal,
      gray: emaGray,
    },
  }),
);