body {
    font-family: "Tajawal", sans-serif;
    background: var(--palette-bg, #f0f4f2);
    color: var(--palette-text, #3d4a46);
}

html {
    font-family: "Tajawal", sans-serif;
    background: var(--palette-bg, #f0f4f2);
}

.dark {
    color-scheme: dark;
}

.dark body {
    background-color: var(--palette-bg) !important;
    color: var(--palette-text);
}

.dark .bg-white {
    background-color: var(--palette-surface-elevated) !important;
}

.dark .text-gray-900 {
    color: var(--palette-text) !important;
}

.dark .text-gray-600,
.dark .text-gray-500 {
    color: var(--palette-text-muted) !important;
}

.dark .border-gray-300 {
    border-color: var(--palette-border) !important;
}

.dark .bg-gray-50 {
    background-color: var(--palette-primary-soft) !important;
}

.rtl {
    direction: rtl;
}

@layer components {
    .pagination-item {
        @apply relative inline-flex items-center px-3 py-1 text-sm font-medium rounded-full transition-colors;
    }

    .pagination-item-active {
        @apply text-white;
        background-color: var(--palette-primary);
    }

    .pagination-item-inactive {
        @apply relative inline-flex items-center px-3 py-1 text-sm font-medium rounded-full transition-colors;
        color: var(--palette-text-muted);
        background-color: var(--palette-surface-elevated);
        border: 1px solid var(--palette-border-subtle);
    }

    .pagination-nav-active {
        color: var(--palette-text-muted);
        background-color: var(--palette-surface-elevated);
    }

    .pagination-nav-disabled {
        color: var(--palette-text-subtle);
        background-color: var(--palette-surface);
        opacity: 0.6;
    }
}

.surah-card {
    transition: all 0.3s ease-in-out;
}

.search-input:focus {
    border-color: var(--palette-primary);
    box-shadow: 0 0 0 3px var(--palette-primary-soft);
    outline: none;
}

@media (max-width: 768px) {
    .account-menu,
    .language-menu {
        display: none;
    }
}