/**
 * White-Label Theme Configuration
 * ================================
 * All visual theming is controlled here. To rebrand the platform,
 * swap this file or override these values from a DB/API.
 *
 * COLOR SYSTEM:
 * - Uses HSL values (without the hsl() wrapper) for CSS variable compatibility
 * - Tailwind classes reference these via CSS custom properties
 * - Hex values provided for contexts that need them (gradients, shadows, SVG)
 */

export interface ThemeConfig {
  /** CSS custom property overrides (HSL values without wrapper) */
  cssVars: {
    background: string;
    foreground: string;
    card: string;
    cardForeground: string;
    popover: string;
    popoverForeground: string;
    primary: string;
    primaryForeground: string;
    secondary: string;
    secondaryForeground: string;
    muted: string;
    mutedForeground: string;
    accent: string;
    accentForeground: string;
    destructive: string;
    destructiveForeground: string;
    border: string;
    input: string;
    ring: string;
  };

  /** Brand accent colors in hex (for gradients, shadows, glows) */
  hex: {
    /** Primary brand color — cyan-400 equivalent */
    brandPrimary: string;
    /** Primary brand darker — cyan-500 equivalent */
    brandPrimaryDeep: string;
    /** Primary brand lighter — cyan-300 equivalent */
    brandPrimaryLight: string;
    /** Secondary brand color — purple-500 equivalent */
    brandSecondary: string;
    /** Secondary brand darker — purple-600 equivalent */
    brandSecondaryDeep: string;
    /** Secondary brand lighter — purple-400 equivalent */
    brandSecondaryLight: string;
    /** Dark background — the deep bg */
    bgDeep: string;
    /** Slightly lighter bg */
    bgElevated: string;
    /** Surface bg for cards */
    bgSurface: string;
  };

  /** RGB values for opacity-based usage (rgba) */
  rgb: {
    brandPrimary: string;
    brandSecondary: string;
    bgDeep: string;
  };
}

/** Default Foundry Familiars "Stardust" theme */
export const defaultTheme: ThemeConfig = {
  cssVars: {
    background: '224 48% 9%',
    foreground: '210 40% 98%',
    card: '219 39% 14%',
    cardForeground: '210 40% 98%',
    popover: '219 39% 14%',
    popoverForeground: '210 40% 98%',
    primary: '199 89% 48%',
    primaryForeground: '224 48% 9%',
    secondary: '27 96% 61%',
    secondaryForeground: '224 48% 9%',
    muted: '219 30% 18%',
    mutedForeground: '215 20% 65%',
    accent: '199 89% 48%',
    accentForeground: '224 48% 9%',
    destructive: '0 84% 60%',
    destructiveForeground: '210 40% 98%',
    border: '219 30% 18%',
    input: '219 30% 18%',
    ring: '199 89% 48%',
  },
  hex: {
    brandPrimary: '#38BDF8',
    brandPrimaryDeep: '#0EA5E9',
    brandPrimaryLight: '#7DD3FC',
    brandSecondary: '#FDBA74',
    brandSecondaryDeep: '#FB923C',
    brandSecondaryLight: '#FED7AA',
    bgDeep: '#0C1222',
    bgElevated: '#111B2E',
    bgSurface: '#162032',
  },
  rgb: {
    brandPrimary: '56, 189, 248',
    brandSecondary: '253, 186, 116',
    bgDeep: '12, 18, 34',
  },
};

/** Get the active theme. In the future this can pull from DB/API. */
export function getTheme(): ThemeConfig {
  return defaultTheme;
}
