/**
 * {{ThemeName}} Theme - Custom brand theme for your project
 * @description Generated theme based on your brand colors
 * @package {{projectName}}
 * @file src/themes/presets/theme-{{themeName}}.js
 */

/**
 * {{ThemeName}} theme preset - Customize these colors to match your brand
 *
 * 🎨 Color Customization Tips:
 * - primary: Your main brand color (buttons, links, focus states)
 * - secondary: Supporting color for less prominent elements
 * - accent: Highlight color for special elements
 * - destructive: Error/danger color (usually red variants)
 *
 * 💡 OKLCH Colors (recommended for better consistency):
 * - Replace hex values with oklch() for better color science
 * - Format: oklch(lightness chroma hue)
 * - Example: oklch(0.60 0.15 250) for a nice blue
 * - Tool: https://oklch.com/
 */
const {{themeName}}Theme = {
  id: '{{themeName}}',
  name: '{{ThemeName}}',
  description: 'Custom {{themeName}} theme with brand colors and modern design',

  // Light mode colors - customize these to match your brand
  light: {
    // Base colors
    background: '#FFFFFF',           // Main page background
    foreground: '#0F172A',           // Primary text color
    card: '#FFFFFF',                 // Card/panel backgrounds
    cardForeground: '#0F172A',       // Text on cards
    popover: '#FFFFFF',              // Dropdown/modal backgrounds
    popoverForeground: '#0F172A',    // Text in popovers

    // Brand colors - UPDATE THESE WITH YOUR BRAND COLORS
    primary: '#3B82F6',              // 🎨 YOUR MAIN BRAND COLOR
    primaryForeground: '#FFFFFF',    // Text on primary elements
    secondary: '#F1F5F9',            // Secondary buttons/elements
    secondaryForeground: '#0F172A',  // Text on secondary elements

    // Supporting colors
    muted: '#F8FAFC',                // Subtle background areas
    mutedForeground: '#64748B',      // Secondary/subtle text
    accent: '#F1F5F9',               // Accent elements
    accentForeground: '#0F172A',     // Text on accent elements

    // State colors
    destructive: '#EF4444',          // Error/danger elements
    destructiveForeground: '#FFFFFF', // Text on destructive elements

    // Border colors
    border: '#E2E8F0',               // Standard borders
    input: '#E2E8F0',                // Input field borders
    ring: '#3B82F6',                 // Focus ring color (usually matches primary)

    // Chart colors for data visualization
    chart1: '#3B82F6',               // Primary data series
    chart2: '#10B981',               // Secondary data series (green)
    chart3: '#F59E0B',               // Tertiary data series (orange)
    chart4: '#EF4444',               // Warning data series (red)
    chart5: '#8B5CF6',               // Additional data series (purple)

    // Sidebar colors for AdminLayout
    sidebar: '#F8FAFC',              // Sidebar background
    sidebarForeground: '#334155',    // Sidebar text
    sidebarPrimary: '#3B82F6',       // Active nav items
    sidebarPrimaryForeground: '#FFFFFF', // Text on active items
    sidebarAccent: '#F1F5F9',        // Hover states
    sidebarAccentForeground: '#334155', // Text on hover
    sidebarBorder: '#E2E8F0',        // Sidebar borders
    sidebarRing: '#3B82F6',          // Focus indicators
  },

  // Dark mode colors - automatically adapted from light mode
  dark: {
    background: '#0F172A',           // Dark page background
    foreground: '#F8FAFC',           // Light text on dark
    card: '#1E293B',                 // Dark card backgrounds
    cardForeground: '#F8FAFC',       // Light text on dark cards
    popover: '#1E293B',              // Dark dropdown backgrounds
    popoverForeground: '#F8FAFC',    // Light text in dark popovers

    // Brand colors - lighter versions for dark mode
    primary: '#60A5FA',              // Lighter version of brand color
    primaryForeground: '#1E293B',    // Dark text on light brand color
    secondary: '#1E293B',            // Dark secondary elements
    secondaryForeground: '#F8FAFC',  // Light text on dark secondary

    // Supporting colors
    muted: '#1E293B',                // Dark muted backgrounds
    mutedForeground: '#94A3B8',      // Muted text in dark mode
    accent: '#1E293B',               // Dark accent elements
    accentForeground: '#F8FAFC',     // Light text on dark accent

    // State colors
    destructive: '#F87171',          // Lighter red for dark mode
    destructiveForeground: '#1F2937', // Dark text on light red

    // Border colors
    border: '#334155',               // Dark borders
    input: '#334155',                // Dark input borders
    ring: '#60A5FA',                 // Light focus ring

    // Chart colors - adjusted for dark mode
    chart1: '#60A5FA',               // Light blue
    chart2: '#34D399',               // Light green
    chart3: '#FBBF24',               // Light orange
    chart4: '#F87171',               // Light red
    chart5: '#A78BFA',               // Light purple

    // Sidebar colors for dark mode
    sidebar: '#0F172A',              // Dark sidebar
    sidebarForeground: '#CBD5E1',    // Light sidebar text
    sidebarPrimary: '#60A5FA',       // Light active nav
    sidebarPrimaryForeground: '#1E293B', // Dark text on light active
    sidebarAccent: '#1E293B',        // Dark hover states
    sidebarAccentForeground: '#CBD5E1', // Light text on dark hover
    sidebarBorder: '#334155',        // Dark sidebar borders
    sidebarRing: '#60A5FA',          // Light focus indicators
  },

  // Optional: Custom design tokens
  design: {
    fontPrimary: 'Inter, system-ui, sans-serif',
    fontDisplay: 'Inter, system-ui, sans-serif',
    fontMono: 'JetBrains Mono, Monaco, monospace',
  },

  // Optional: Custom CSS styles for this theme
  customStyles: `
    /* Essential heading styles for {{themeName}} theme */
    .theme-{{themeName}} .voila-heading {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 1.1;
      font-size: clamp(2.5rem, 6vw, 4rem);
      color: var(--color-foreground);
    }

    .theme-{{themeName}} .voila-subheading {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.3;
      font-size: clamp(1.25rem, 3vw, 2rem);
      color: var(--color-muted-foreground);
    }
  `
};

export default {{themeName}}Theme;