/* ===================================
   THEME VARIABLES
   =================================== */
:root {
    --bg-default: #FFFFFF;
    --bg-gray50: #F9FAFB;
    --bg-gray100: #F3F4F6;
    --bg-gray200: #E5E7EB;
    --bg-gray300: #D1D5DB;
    --bg-gray400: #9CA3AF;
    --bg-gray500: #6B7280;
    --bg-gray600: #4B5563;
    --bg-gray700: #374151;
    --bg-gray800: #1F2937;
    --bg-gray900: #111827;
    --bg-gray950: #030712;
    --emerald500: #10B981;
    --emerald600: #059669;
    --red500: #EF4444;
    --red600: #DC2626;
}

/* Dark mode detection */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-default: #030712;
        --bg-gray50: #111827;
        --bg-gray100: #1F2937;
        --bg-gray200: #374151;
        --bg-gray300: #4B5563;
        --bg-gray400: #6B7280;
        --bg-gray500: #9CA3AF;
        --bg-gray600: #D1D5DB;
        --bg-gray700: #E5E7EB;
        --bg-gray800: #F3F4F6;
        --bg-gray900: #F9FAFB;
        --bg-gray950: #FFFFFF;
    }
}

/* Theme Classes */
.theme-light {
    --bg-default: #FFFFFF;
    --bg-gray50: #F9FAFB;
    --bg-gray100: #F3F4F6;
    --bg-gray200: #E5E7EB;
    --bg-gray300: #D1D5DB;
    --bg-gray400: #9CA3AF;
    --bg-gray500: #6B7280;
    --bg-gray600: #4B5563;
    --bg-gray700: #374151;
    --bg-gray800: #1F2937;
    --bg-gray900: #111827;
    --bg-gray950: #030712;
}

.theme-dark {
    --bg-default: #030712;
    --bg-gray50: #111827;
    --bg-gray100: #1F2937;
    --bg-gray200: #374151;
    --bg-gray300: #4B5563;
    --bg-gray400: #6B7280;
    --bg-gray500: #9CA3AF;
    --bg-gray600: #D1D5DB;
    --bg-gray700: #E5E7EB;
    --bg-gray800: #F3F4F6;
    --bg-gray900: #F9FAFB;
    --bg-gray950: #FFFFFF;
}