@props([
    'type' => 'dropdown', // dropdown, inline
])

<div x-data="{ 
    open: false, 
    mode: localStorage.getItem('theme_mode') || 'light', 
    accent: localStorage.getItem('accent_theme') || 'royal',
    changeMode(newMode) {
        this.mode = newMode;
        localStorage.setItem('theme_mode', newMode);
        document.documentElement.setAttribute('data-theme-mode', newMode);
        
        const isDark = newMode === 'dark' || 
            (newMode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
            
        if (isDark) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
        
        window.dispatchEvent(new CustomEvent('theme-mode-changed', { detail: newMode }));
    },
    changeAccent(newAccent) {
        this.accent = newAccent;
        localStorage.setItem('accent_theme', newAccent);
        document.documentElement.setAttribute('data-ka-accent', newAccent);
        
        window.dispatchEvent(new CustomEvent('theme-accent-changed', { detail: newAccent }));
    }
}" 
x-on:theme-mode-changed.window="mode = $event.detail"
x-on:theme-accent-changed.window="accent = $event.detail"
class="relative select-none">

    @if($type === 'dropdown')
        <!-- Dropdown Button Trigger -->
        <button @click="open = !open" 
                class="btn-pill inline-flex items-center space-x-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors py-1.5 px-3.5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--ka-primary)]"
                aria-haspopup="true" 
                :aria-expanded="open ? 'true' : 'false'"
                aria-label="Theme & Appearance Settings">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" class="w-4 h-4 text-[var(--ka-primary)] transition-transform duration-500 hover:rotate-45">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122A3 3 0 0 0 10.47 18h2.06a3 3 0 0 0 .94-1.878l.492-3.134A2.37 2.37 0 0 0 13.9 11.25H10.1a2.37 2.37 0 0 0-.062 1.738L9.53 16.122ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM21 9a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 6a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM3 9a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0ZM5.25 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM5.25 6a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
            </svg>
            <span class="text-xs font-semibold capitalize" x-text="mode"></span>
        </button>

        <!-- Dropdown Popover Panel -->
        <div x-show="open" 
             @click.outside="open = false" 
             @keydown.escape.window="open = false"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-2 scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 scale-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0 scale-100"
             x-transition:leave-end="opacity-0 translate-y-2 scale-95"
             class="absolute right-0 mt-2.5 w-64 z-50 backdrop-blur-md bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-800 shadow-2xl p-4 rounded-[0.1rem]" 
             style="box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;"
             role="dialog" 
             aria-modal="true" 
             aria-label="Appearance settings">
            
            <!-- Appearance Mode Selectors -->
            <div class="mb-4">
                <span class="text-[10px] font-bold tracking-wider text-slate-400 dark:text-slate-500 uppercase block mb-2 leading-none">Appearance Mode</span>
                <div class="grid grid-cols-3 gap-1.5">
                    <!-- Light Button -->
                    <button @click="changeMode('light')" 
                            class="flex flex-col items-center justify-center py-2 px-1 border rounded-[0.1rem] transition-colors focus:outline-none"
                            :class="mode === 'light' ? 'border-[var(--ka-primary)] bg-[var(--ka-primary)]/5 text-[var(--ka-primary)]' : 'border-slate-100 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-400'"
                            aria-label="Light Mode"
                            :aria-pressed="mode === 'light' ? 'true' : 'false'">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" class="w-4 h-4 mb-1">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m0 13.5V21m8.97-8.97h-2.25C18.15 12 18 12.15 18 12.33v.04c0 .18.15.33.33.33h2.25C20.85 12.7 21 12.55 21 12.37v-.04c0-.18-.15-.33-.33-.33ZM4.5 12a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0Z" />
                        </svg>
                        <span class="text-[9px] font-bold uppercase tracking-wider leading-none">Light</span>
                    </button>

                    <!-- Dark Button -->
                    <button @click="changeMode('dark')" 
                            class="flex flex-col items-center justify-center py-2 px-1 border rounded-[0.1rem] transition-colors focus:outline-none"
                            :class="mode === 'dark' ? 'border-[var(--ka-primary)] bg-[var(--ka-primary)]/5 text-[var(--ka-primary)]' : 'border-slate-100 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-400'"
                            aria-label="Dark Mode"
                            :aria-pressed="mode === 'dark' ? 'true' : 'false'">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" class="w-4 h-4 mb-1">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
                        </svg>
                        <span class="text-[9px] font-bold uppercase tracking-wider leading-none">Dark</span>
                    </button>

                    <!-- System Button -->
                    <button @click="changeMode('system')" 
                            class="flex flex-col items-center justify-center py-2 px-1 border rounded-[0.1rem] transition-colors focus:outline-none"
                            :class="mode === 'system' ? 'border-[var(--ka-primary)] bg-[var(--ka-primary)]/5 text-[var(--ka-primary)]' : 'border-slate-100 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-400'"
                            aria-label="System Preference Mode"
                            :aria-pressed="mode === 'system' ? 'true' : 'false'">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" class="w-4 h-4 mb-1">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
                        </svg>
                        <span class="text-[9px] font-bold uppercase tracking-wider leading-none">System</span>
                    </button>
                </div>
            </div>

            <!-- Accent Swatch Options -->
            <div>
                <span class="text-[10px] font-bold tracking-wider text-slate-400 dark:text-slate-500 uppercase block mb-2 leading-none">Brand Color Accent</span>
                <div class="grid grid-cols-3 gap-2">
                    <!-- Swatch 1: Royal Blue -->
                    <button @click="changeAccent('royal')" 
                            class="flex flex-col items-center justify-center p-2 border rounded-[0.1rem] transition-colors focus:outline-none"
                            :class="accent === 'royal' ? 'border-[#2B3192] bg-[#2B3192]/5 text-[#2B3192]' : 'border-slate-100 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-400'"
                            aria-label="Royal Blue Accent"
                            :aria-pressed="accent === 'royal' ? 'true' : 'false'">
                        <div class="w-3.5 h-3.5 rounded-full bg-[#2B3192] shadow-inner mb-1.5 relative">
                            <div x-show="accent === 'royal'" class="absolute inset-1 bg-white rounded-full"></div>
                        </div>
                        <span class="text-[8px] font-bold uppercase tracking-wide leading-none whitespace-nowrap">Royal Blue</span>
                    </button>

                    <!-- Swatch 2: Sky Cyan -->
                    <button @click="changeAccent('cyan')" 
                            class="flex flex-col items-center justify-center p-2 border rounded-[0.1rem] transition-colors focus:outline-none"
                            :class="accent === 'cyan' ? 'border-[#1FADEA] bg-[#1FADEA]/5 text-[#1FADEA]' : 'border-slate-100 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-400'"
                            aria-label="Sky Cyan Accent"
                            :aria-pressed="accent === 'cyan' ? 'true' : 'false'">
                        <div class="w-3.5 h-3.5 rounded-full bg-[#1FADEA] shadow-inner mb-1.5 relative">
                            <div x-show="accent === 'cyan'" class="absolute inset-1 bg-white rounded-full"></div>
                        </div>
                        <span class="text-[8px] font-bold uppercase tracking-wide leading-none whitespace-nowrap">Sky Cyan</span>
                    </button>

                    <!-- Swatch 3: Champagne Gold -->
                    <button @click="changeAccent('gold')" 
                            class="flex flex-col items-center justify-center p-2 border rounded-[0.1rem] transition-colors focus:outline-none"
                            :class="accent === 'gold' ? 'border-[#D6A84F] bg-[#D6A84F]/5 text-[#D6A84F]' : 'border-slate-100 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-400'"
                            aria-label="Champagne Gold Accent"
                            :aria-pressed="accent === 'gold' ? 'true' : 'false'">
                        <div class="w-3.5 h-3.5 rounded-full bg-[#D6A84F] shadow-inner mb-1.5 relative">
                            <div x-show="accent === 'gold'" class="absolute inset-1 bg-white rounded-full"></div>
                        </div>
                        <span class="text-[8px] font-bold uppercase tracking-wide leading-none whitespace-nowrap">Luxury Gold</span>
                    </button>

                    <!-- Swatch 4: Midnight Navy -->
                    <button @click="changeAccent('navy')" 
                            class="flex flex-col items-center justify-center p-2 border rounded-[0.1rem] transition-colors focus:outline-none"
                            :class="accent === 'navy' ? 'border-[#080D2B] bg-[#080D2B]/5 text-[#080D2B]' : 'border-slate-100 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-400'"
                            aria-label="Midnight Navy Accent"
                            :aria-pressed="accent === 'navy' ? 'true' : 'false'">
                        <div class="w-3.5 h-3.5 rounded-full bg-[#080D2B] shadow-inner mb-1.5 relative">
                            <div x-show="accent === 'navy'" class="absolute inset-1 bg-white rounded-full"></div>
                        </div>
                        <span class="text-[8px] font-bold uppercase tracking-wide leading-none whitespace-nowrap">Dark Navy</span>
                    </button>

                    <!-- Swatch 5: Emerald Stay -->
                    <button @click="changeAccent('emerald')" 
                            class="flex flex-col items-center justify-center p-2 border rounded-[0.1rem] transition-colors focus:outline-none"
                            :class="accent === 'emerald' ? 'border-[#16A34A] bg-[#16A34A]/5 text-[#16A34A]' : 'border-slate-100 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-400'"
                            aria-label="Emerald Stay Accent"
                            :aria-pressed="accent === 'emerald' ? 'true' : 'false'">
                        <div class="w-3.5 h-3.5 rounded-full bg-[#16A34A] shadow-inner mb-1.5 relative">
                            <div x-show="accent === 'emerald'" class="absolute inset-1 bg-white rounded-full"></div>
                        </div>
                        <span class="text-[8px] font-bold uppercase tracking-wide leading-none whitespace-nowrap">Emerald Stay</span>
                    </button>

                    <!-- Swatch 6: Warm Amber -->
                    <button @click="changeAccent('amber')" 
                            class="flex flex-col items-center justify-center p-2 border rounded-[0.1rem] transition-colors focus:outline-none"
                            :class="accent === 'amber' ? 'border-[#F59E0B] bg-[#F59E0B]/5 text-[#F59E0B]' : 'border-slate-100 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-400'"
                            aria-label="Warm Amber Accent"
                            :aria-pressed="accent === 'amber' ? 'true' : 'false'">
                        <div class="w-3.5 h-3.5 rounded-full bg-[#F59E0B] shadow-inner mb-1.5 relative">
                            <div x-show="accent === 'amber'" class="absolute inset-1 bg-white rounded-full"></div>
                        </div>
                        <span class="text-[8px] font-bold uppercase tracking-wide leading-none whitespace-nowrap">Warm Amber</span>
                    </button>
                </div>
            </div>
        </div>
    @elseif($type === 'inline')
        <!-- Inline Settings Blocks for Mobile Accordion / Footer -->
        <div class="space-y-4 p-4 bg-slate-50/50 dark:bg-slate-900/30 border border-slate-100 dark:border-slate-800 rounded-[0.1rem]">
            <!-- Appearance Mode Selectors -->
            <div>
                <span class="text-[10px] font-bold tracking-wider text-slate-400 dark:text-slate-500 uppercase block mb-2 leading-none">Appearance Mode</span>
                <div class="grid grid-cols-3 gap-2">
                    <!-- Light Button -->
                    <button @click="changeMode('light')" 
                            class="flex flex-col items-center justify-center py-2.5 px-1 border rounded-[0.1rem] bg-white dark:bg-slate-950 transition-colors focus:outline-none"
                            :class="mode === 'light' ? 'border-[var(--ka-primary)] text-[var(--ka-primary)] shadow-sm' : 'border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-400'"
                            aria-label="Light Mode"
                            :aria-pressed="mode === 'light' ? 'true' : 'false'">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" class="w-4 h-4 mb-1">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m0 13.5V21m8.97-8.97h-2.25C18.15 12 18 12.15 18 12.33v.04c0 .18.15.33.33.33h2.25C20.85 12.7 21 12.55 21 12.37v-.04c0-.18-.15-.33-.33-.33ZM4.5 12a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0Z" />
                        </svg>
                        <span class="text-[9px] font-bold uppercase tracking-wider leading-none">Light</span>
                    </button>

                    <!-- Dark Button -->
                    <button @click="changeMode('dark')" 
                            class="flex flex-col items-center justify-center py-2.5 px-1 border rounded-[0.1rem] bg-white dark:bg-slate-950 transition-colors focus:outline-none"
                            :class="mode === 'dark' ? 'border-[var(--ka-primary)] text-[var(--ka-primary)] shadow-sm' : 'border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-400'"
                            aria-label="Dark Mode"
                            :aria-pressed="mode === 'dark' ? 'true' : 'false'">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" class="w-4 h-4 mb-1">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
                        </svg>
                        <span class="text-[9px] font-bold uppercase tracking-wider leading-none">Dark</span>
                    </button>

                    <!-- System Button -->
                    <button @click="changeMode('system')" 
                            class="flex flex-col items-center justify-center py-2.5 px-1 border rounded-[0.1rem] bg-white dark:bg-slate-950 transition-colors focus:outline-none"
                            :class="mode === 'system' ? 'border-[var(--ka-primary)] text-[var(--ka-primary)] shadow-sm' : 'border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-400'"
                            aria-label="System Preference Mode"
                            :aria-pressed="mode === 'system' ? 'true' : 'false'">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" class="w-4 h-4 mb-1">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
                        </svg>
                        <span class="text-[9px] font-bold uppercase tracking-wider leading-none">System</span>
                    </button>
                </div>
            </div>

            <!-- Accent Swatch Options -->
            <div>
                <span class="text-[10px] font-bold tracking-wider text-slate-400 dark:text-slate-500 uppercase block mb-2 leading-none">Brand Color Accent</span>
                <div class="grid grid-cols-3 gap-2">
                    <!-- Swatch 1: Royal Blue -->
                    <button @click="changeAccent('royal')" 
                            class="flex flex-col items-center justify-center p-2 border rounded-[0.1rem] bg-white dark:bg-slate-950 transition-colors focus:outline-none"
                            :class="accent === 'royal' ? 'border-[#2B3192] text-[#2B3192] shadow-sm' : 'border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-400'"
                            aria-label="Royal Blue Accent"
                            :aria-pressed="accent === 'royal' ? 'true' : 'false'">
                        <div class="w-3.5 h-3.5 rounded-full bg-[#2B3192] shadow-inner mb-1.5 relative">
                            <div x-show="accent === 'royal'" class="absolute inset-1 bg-white rounded-full"></div>
                        </div>
                        <span class="text-[8px] font-bold uppercase tracking-wide leading-none whitespace-nowrap">Royal Blue</span>
                    </button>

                    <!-- Swatch 2: Sky Cyan -->
                    <button @click="changeAccent('cyan')" 
                            class="flex flex-col items-center justify-center p-2 border rounded-[0.1rem] bg-white dark:bg-slate-950 transition-colors focus:outline-none"
                            :class="accent === 'cyan' ? 'border-[#1FADEA] text-[#1FADEA] shadow-sm' : 'border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-400'"
                            aria-label="Sky Cyan Accent"
                            :aria-pressed="accent === 'cyan' ? 'true' : 'false'">
                        <div class="w-3.5 h-3.5 rounded-full bg-[#1FADEA] shadow-inner mb-1.5 relative">
                            <div x-show="accent === 'cyan'" class="absolute inset-1 bg-white rounded-full"></div>
                        </div>
                        <span class="text-[8px] font-bold uppercase tracking-wide leading-none whitespace-nowrap">Sky Cyan</span>
                    </button>

                    <!-- Swatch 3: Champagne Gold -->
                    <button @click="changeAccent('gold')" 
                            class="flex flex-col items-center justify-center p-2 border rounded-[0.1rem] bg-white dark:bg-slate-950 transition-colors focus:outline-none"
                            :class="accent === 'gold' ? 'border-[#D6A84F] text-[#D6A84F] shadow-sm' : 'border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-400'"
                            aria-label="Champagne Gold Accent"
                            :aria-pressed="accent === 'gold' ? 'true' : 'false'">
                        <div class="w-3.5 h-3.5 rounded-full bg-[#D6A84F] shadow-inner mb-1.5 relative">
                            <div x-show="accent === 'gold'" class="absolute inset-1 bg-white rounded-full"></div>
                        </div>
                        <span class="text-[8px] font-bold uppercase tracking-wide leading-none whitespace-nowrap">Luxury Gold</span>
                    </button>

                    <!-- Swatch 4: Midnight Navy -->
                    <button @click="changeAccent('navy')" 
                            class="flex flex-col items-center justify-center p-2 border rounded-[0.1rem] bg-white dark:bg-slate-950 transition-colors focus:outline-none"
                            :class="accent === 'navy' ? 'border-[#080D2B] text-[#080D2B] shadow-sm' : 'border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-400'"
                            aria-label="Midnight Navy Accent"
                            :aria-pressed="accent === 'navy' ? 'true' : 'false'">
                        <div class="w-3.5 h-3.5 rounded-full bg-[#080D2B] shadow-inner mb-1.5 relative">
                            <div x-show="accent === 'navy'" class="absolute inset-1 bg-white rounded-full"></div>
                        </div>
                        <span class="text-[8px] font-bold uppercase tracking-wide leading-none whitespace-nowrap">Dark Navy</span>
                    </button>

                    <!-- Swatch 5: Emerald Stay -->
                    <button @click="changeAccent('emerald')" 
                            class="flex flex-col items-center justify-center p-2 border rounded-[0.1rem] bg-white dark:bg-slate-950 transition-colors focus:outline-none"
                            :class="accent === 'emerald' ? 'border-[#16A34A] text-[#16A34A] shadow-sm' : 'border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-400'"
                            aria-label="Emerald Stay Accent"
                            :aria-pressed="accent === 'emerald' ? 'true' : 'false'">
                        <div class="w-3.5 h-3.5 rounded-full bg-[#16A34A] shadow-inner mb-1.5 relative">
                            <div x-show="accent === 'emerald'" class="absolute inset-1 bg-white rounded-full"></div>
                        </div>
                        <span class="text-[8px] font-bold uppercase tracking-wide leading-none whitespace-nowrap">Emerald Stay</span>
                    </button>

                    <!-- Swatch 6: Warm Amber -->
                    <button @click="changeAccent('amber')" 
                            class="flex flex-col items-center justify-center p-2 border rounded-[0.1rem] bg-white dark:bg-slate-950 transition-colors focus:outline-none"
                            :class="accent === 'amber' ? 'border-[#F59E0B] text-[#F59E0B] shadow-sm' : 'border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-400'"
                            aria-label="Warm Amber Accent"
                            :aria-pressed="accent === 'amber' ? 'true' : 'false'">
                        <div class="w-3.5 h-3.5 rounded-full bg-[#F59E0B] shadow-inner mb-1.5 relative">
                            <div x-show="accent === 'amber'" class="absolute inset-1 bg-white rounded-full"></div>
                        </div>
                        <span class="text-[8px] font-bold uppercase tracking-wide leading-none whitespace-nowrap">Warm Amber</span>
                    </button>
                </div>
            </div>
        </div>
    @endif

</div>