🏢 Brand Variations

interface BrandSystem {
  brands: {
    [brandId: string]: {
      name: string;
      logo: string;
      colors: BrandColors;
      typography: BrandTypography;
      assets: BrandAssets;
      guidelines: BrandGuidelines;
    }
  };
  activeBrand: string;
  fallback: 'default' | 'inherit';
}

// Brand switching system
function setBrand(brandId: string) {
  // Remove existing brand classes
  document.documentElement.classList.remove(
    ...Array.from(document.documentElement.classList)
      .filter(cls => cls.startsWith('brand-'))
  )

  // Apply new brand
  document.documentElement.classList.add(`brand-${brandId}`)

  // Update CSS variables
  const brand = brands[brandId]
  const root = document.documentElement.style

  root.setProperty('--brand-primary', brand.colors.primary)
  root.setProperty('--brand-secondary', brand.colors.secondary)
  root.setProperty('--brand-accent', brand.colors.accent)

  // Save preference
  localStorage.setItem('active-brand', brandId)
}

/* Base theme variables */
:root {
  --brand-primary: var(--default-primary);
  --brand-secondary: var(--default-secondary);
}

/* Corporate brand override */
.brand-corporate {
  --brand-primary: 59 130 246;
  --brand-secondary: 107 114 128;
  --brand-font-family: 'Inter', sans-serif;
  --brand-border-radius: 0.375rem;
}

/* Creative brand override */
.brand-creative {
  --brand-primary: 139 92 246;
  --brand-secondary: 236 72 153;
  --brand-font-family: 'Poppins', sans-serif;
  --brand-border-radius: 1rem;
}

/* Eco brand override */
.brand-eco {
  --brand-primary: 22 163 74;
  --brand-secondary: 13 148 136;
  --brand-font-family: 'Nunito', sans-serif;
  --brand-border-radius: 0.5rem;
}