<style>
:root {
    /* Primary Colors */
    --primary-50: color-mix(in srgb, {{ $siteSettings->color_primary ?? '#1A365D' }} 10%, white 90%);
    --primary-100: color-mix(in srgb, {{ $siteSettings->color_primary ?? '#1A365D' }} 20%, white 80%);
    --primary-200: color-mix(in srgb, {{ $siteSettings->color_primary ?? '#1A365D' }} 40%, white 60%);
    --primary-300: color-mix(in srgb, {{ $siteSettings->color_primary ?? '#1A365D' }} 60%, white 40%);
    --primary-400: color-mix(in srgb, {{ $siteSettings->color_primary ?? '#1A365D' }} 80%, white 20%);
    --primary-500: {{ $siteSettings->color_primary ?? '#1A365D' }};
    --primary-600: color-mix(in srgb, {{ $siteSettings->color_primary ?? '#1A365D' }} 80%, black 20%);
    --primary-700: color-mix(in srgb, {{ $siteSettings->color_primary ?? '#1A365D' }} 60%, black 40%);
    --primary-800: color-mix(in srgb, {{ $siteSettings->color_primary ?? '#1A365D' }} 40%, black 60%);
    --primary-900: color-mix(in srgb, {{ $siteSettings->color_primary ?? '#1A365D' }} 20%, black 80%);
    
    /* Secondary Colors */
    --secondary-50: color-mix(in srgb, {{ $siteSettings->color_secondary ?? '#00A0B0' }} 10%, white 90%);
    --secondary-100: color-mix(in srgb, {{ $siteSettings->color_secondary ?? '#00A0B0' }} 20%, white 80%);
    --secondary-200: color-mix(in srgb, {{ $siteSettings->color_secondary ?? '#00A0B0' }} 40%, white 60%);
    --secondary-300: color-mix(in srgb, {{ $siteSettings->color_secondary ?? '#00A0B0' }} 60%, white 40%);
    --secondary-400: color-mix(in srgb, {{ $siteSettings->color_secondary ?? '#00A0B0' }} 80%, white 20%);
    --secondary-500: {{ $siteSettings->color_secondary ?? '#00A0B0' }};
    --secondary-600: color-mix(in srgb, {{ $siteSettings->color_secondary ?? '#00A0B0' }} 80%, black 20%);
    --secondary-700: color-mix(in srgb, {{ $siteSettings->color_secondary ?? '#00A0B0' }} 60%, black 40%);
    --secondary-800: color-mix(in srgb, {{ $siteSettings->color_secondary ?? '#00A0B0' }} 40%, black 60%);
    --secondary-900: color-mix(in srgb, {{ $siteSettings->color_secondary ?? '#00A0B0' }} 20%, black 80%);
    
    /* Footer Background */
    --footer-bg: {{ $siteSettings->footer_bg ?? '#1A365D' }};
    
    /* Font Family */
    --font-family: '{{ $siteSettings->font_family ?? 'Cairo' }}', sans-serif;
    --font-size-base: {{ $siteSettings->base_size ?? 16 }}px;
}

/* Utility classes using CSS variables */
.bg-theme-primary { background-color: var(--primary-500); }
.bg-theme-primary-dark { background-color: var(--primary-600); }
.bg-theme-primary-light { background-color: var(--primary-100); }

.text-theme-primary { color: var(--primary-500); }
.text-theme-primary-dark { color: var(--primary-700); }

.border-theme-primary { border-color: var(--primary-500); }

.hover\:bg-theme-primary-dark:hover { background-color: var(--primary-600); }
.hover\:text-theme-primary:hover { color: var(--primary-500); }

.bg-theme-secondary { background-color: var(--secondary-500); }
.text-theme-secondary { color: var(--secondary-500); }

.bg-footer { background-color: var(--footer-bg); }
</style>
