:root {
        --primary-font: Inter;
    --secondary-font: Vazirmatn;
    --custom-font: AMINI;
    --text-size-base: 16px;
    --text-size-h1: 2.5rem;
    --text-size-h2: 2rem;
    --text-size-h3: 1.75rem;
    --text-size-h4: 1.5rem;
    --text-size-h5: 1.25rem;
    --text-size-h6: 1rem;
    --color-primary: #007bff;
    --color-secondary: #6c757d;
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-info: #17a2b8;
    --color-background: #ffffff;
    --color-surface: #f8f9fa;
    --color-text-primary: #212529;
    --color-text-secondary: #6c757d;
    --color-text-muted: #adb5bd;
    --color-border: #dee2e6;
    --color-header-bg: #1a1a1a;
    --color-header-text: #ffffff;
    --color-footer-bg: #1a1a1a;
    --color-footer-text: #ffffff;
    --color-link: #007bff;
    --color-link-hover: #0056b3;
    --color-button-primary: #007bff;
    --color-button-primary-hover: #0056b3;
    --color-button-secondary: #6c757d;
    --color-button-secondary-hover: #5a6268;
    --dark-color-background: #121212;
    --dark-color-surface: #1e1e1e;
    --dark-color-text-primary: #ffffff;
    --dark-color-text-secondary: #b0b0b0;
    --dark-color-text-muted: #808080;
    --dark-color-border: #333333;
    --dark-color-header-bg: #000000;
    --dark-color-header-text: #ffffff;
    --dark-color-footer-bg: #000000;
    --dark-color-footer-text: #ffffff;
    --reading-color-background: #f4f1e8;
    --reading-color-surface: #faf8f3;
    --reading-color-text-primary: #2c2416;
    --reading-color-text-secondary: #4a3d2a;
    --reading-color-text-muted: #6b5d47;
    --reading-color-border: #d4c4a8;
    --reading-color-header-bg: #e8dcc4;
    --reading-color-header-text: #2c2416;
    --reading-color-footer-bg: #e8dcc4;
    --reading-color-footer-text: #2c2416;
    --reading-color-link: #8b6914;
    --reading-color-link-hover: #6b4f0f;
    --container-max-width: 1200px;
    --spacing-unit: 1rem;
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 16px;
    --header-height: 80px;
    --footer-height: auto;
}

/* Apply custom font */
body {
    font-family: 'AMINI', Inter, Vazirmatn, sans-serif;
    font-size: 16px;
}

[dir="rtl"] body {
    font-family: 'AMINI', Vazirmatn, Inter, sans-serif;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* Apply colors dynamically */
.navbar {
    background-color: var(--color-header-bg, #1a1a1a) !important;
    color: var(--color-header-text, #ffffff) !important;
}

.main-footer {
    background-color: var(--color-footer-bg, #1a1a1a) !important;
    color: var(--color-footer-text, #ffffff) !important;
}

body {
    background-color: var(--color-background, #ffffff);
    color: var(--color-text-primary, #212529);
}

/* Admin Panel Styles */
.admin-body {
    font-family: 'AMINI', Inter, Vazirmatn, sans-serif !important;
    font-size: 16px !important;
}

[dir="rtl"] .admin-body {
    font-family: 'AMINI', Vazirmatn, Inter, sans-serif !important;
}

.admin-sidebar {
    background: linear-gradient(180deg, var(--color-header-bg, #1a1a1a) 0%, var(--color-header-bg, #1a1a1a) 100%) !important;
    color: var(--color-header-text, #ffffff) !important;
}

.admin-topbar {
    background-color: var(--color-background, #ffffff) !important;
    color: var(--color-text-primary, #212529) !important;
    border-bottom-color: var(--color-border, #dee2e6) !important;
}

.admin-main {
    background-color: var(--color-surface, #f8f9fa) !important;
    color: var(--color-text-primary, #212529) !important;
}

.sidebar-menu a.active {
    border-left-color: var(--color-primary, #007bff) !important;
}

.sidebar-menu a:hover {
    border-left-color: var(--color-primary, #007bff) !important;
}

.btn-primary {
    background-color: var(--color-button-primary, #007bff) !important;
    border-color: var(--color-button-primary, #007bff) !important;
}

.btn-primary:hover {
    background-color: var(--color-button-primary-hover, #0056b3) !important;
    border-color: var(--color-button-primary-hover, #0056b3) !important;
}

.btn-secondary {
    background-color: var(--color-button-secondary, #6c757d) !important;
    border-color: var(--color-button-secondary, #6c757d) !important;
}

.btn-secondary:hover {
    background-color: var(--color-button-secondary-hover, #5a6268) !important;
    border-color: var(--color-button-secondary-hover, #5a6268) !important;
}

.stat-card.bg-primary {
    background-color: var(--color-primary, #007bff) !important;
}

.stat-card.bg-success {
    background-color: var(--color-success, #28a745) !important;
}

.stat-card.bg-info {
    background-color: var(--color-info, #17a2b8) !important;
}

.stat-card.bg-warning {
    background-color: var(--color-warning, #ffc107) !important;
}

.stat-card.bg-danger {
    background-color: var(--color-danger, #dc3545) !important;
}

/* Theme Variables - Available for JavaScript theme switching */
.theme-light {
    --theme-bg: var(--color-background, #ffffff);
    --theme-surface: var(--color-surface, #f8f9fa);
    --theme-text-primary: var(--color-text-primary, #212529);
    --theme-text-secondary: var(--color-text-secondary, #6c757d);
    --theme-text-muted: var(--color-text-muted, #adb5bd);
    --theme-border: var(--color-border, #dee2e6);
    --theme-input-bg: var(--color-background, #ffffff);
    --theme-input-border: var(--color-border, #dee2e6);
    --theme-input-text: var(--color-text-primary, #212529);
    --theme-link: var(--color-link, #007bff);
    --theme-link-hover: var(--color-link-hover, #0056b3);
}

.theme-dark {
    --theme-bg: var(--dark-color-background, #121212);
    --theme-surface: var(--dark-color-surface, #1e1e1e);
    --theme-text-primary: var(--dark-color-text-primary, #ffffff);
    --theme-text-secondary: var(--dark-color-text-secondary, #b0b0b0);
    --theme-text-muted: var(--dark-color-text-muted, #808080);
    --theme-border: var(--dark-color-border, #333333);
    --theme-input-bg: var(--dark-color-surface, #1e1e1e);
    --theme-input-border: var(--dark-color-border, #333333);
    --theme-input-text: var(--dark-color-text-primary, #ffffff);
    --theme-link: var(--color-link, #007bff);
    --theme-link-hover: var(--color-link-hover, #0056b3);
}

.theme-reading {
    --theme-bg: var(--reading-color-background, #f4f1e8);
    --theme-surface: var(--reading-color-surface, #faf8f3);
    --theme-text-primary: var(--reading-color-text-primary, #2c2416);
    --theme-text-secondary: var(--reading-color-text-secondary, #4a3d2a);
    --theme-text-muted: var(--reading-color-text-muted, #6b5d47);
    --theme-border: var(--reading-color-border, #d4c4a8);
    --theme-input-bg: var(--reading-color-surface, #faf8f3);
    --theme-input-border: var(--reading-color-border, #d4c4a8);
    --theme-input-text: var(--reading-color-text-primary, #2c2416);
    --theme-link: var(--reading-color-link, #8b6914);
    --theme-link-hover: var(--reading-color-link-hover, #6b4f0f);
}

/* Apply theme colors globally */
.theme-dark body,
.theme-dark #main-content {
    background-color: var(--theme-bg) !important;
    color: var(--theme-text-primary) !important;
}

.theme-reading body,
.theme-reading #main-content {
    background-color: var(--theme-bg) !important;
    color: var(--theme-text-primary) !important;
}

/* Dark theme support for auto mode */
@media (prefers-color-scheme: dark) {
    :root:not(.theme-light):not(.theme-reading) {
        --color-background: var(--dark-color-background, #121212);
        --color-surface: var(--dark-color-surface, #1e1e1e);
        --color-text-primary: var(--dark-color-text-primary, #ffffff);
        --color-text-secondary: var(--dark-color-text-secondary, #b0b0b0);
        --color-text-muted: var(--dark-color-text-muted, #808080);
        --color-border: var(--dark-color-border, #333333);
        --color-header-bg: var(--dark-color-header-bg, #000000);
        --color-header-text: var(--dark-color-header-text, #ffffff);
        --color-footer-bg: var(--dark-color-footer-bg, #000000);
        --color-footer-text: var(--dark-color-footer-text, #ffffff);
    }
}

/* Admin Panel Dark Theme Styles */
.theme-dark .admin-sidebar {
    background: linear-gradient(180deg, var(--dark-color-header-bg, #000000) 0%, var(--dark-color-header-bg, #000000) 100%) !important;
    color: var(--dark-color-header-text, #ffffff) !important;
}

.theme-dark .admin-topbar {
    background-color: var(--dark-color-background, #121212) !important;
    color: var(--dark-color-text-primary, #ffffff) !important;
    border-bottom-color: var(--dark-color-border, #333333) !important;
}

.theme-dark .admin-main {
    background-color: var(--dark-color-surface, #1e1e1e) !important;
    color: var(--dark-color-text-primary, #ffffff) !important;
}