/* Dynamic Font Override */
:root {
    --selected-font: var(--app-font-family, 'Tajawal');
}

/* Font Face Definitions */
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Tajawal'), url('/fonts/tajawal-400-arabic.woff2') format('woff2');
}

@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Almarai'), url('/fonts/almarai-400-arabic.woff2') format('woff2');
}

/* Force selected font everywhere */
html, body {
    font-family: var(--selected-font) !important;
}

/* Override all common elements */
* {
    font-family: var(--selected-font) !important;
}

/* Maximum specificity override */
html body *,
html body div,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body p, html body a, html body span, html body small, html body strong, html body em,
html body ul, html body ol, html body li,
html body label, html body input, html body select, html body textarea, html body button,
html body .btn, html body .form-control, html body .form-select, html body .nav-link,
html body .card, html body .sidebar, html body .top-header, html body .welcome-banner,
html body .navbar, html body .hero-title, html body .hero-subtitle {
    font-family: var(--selected-font) !important;
}