/** Shared by `<hero-banner theme>` and `<color-swatch-picker>` so the two stay in step. */
export const THEMES = ['sunset', 'ocean', 'neon'] as const;

export type Theme = (typeof THEMES)[number];

/** Swatch colours for the picker; the banner defines its own gradients in CSS. */
export const SWATCHES: Readonly<Record<Theme, string>> = {
  sunset: 'linear-gradient(135deg, #ff5f6d, #ffc371)',
  ocean: 'linear-gradient(135deg, #2193b0, #6dd5ed)',
  neon: 'linear-gradient(135deg, #f72585, #7209b7, #4cc9f0)',
};