@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../../fonts/IBMPlexSansArabic-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../../fonts/IBMPlexSansArabic-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../../fonts/IBMPlexSansArabic-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../../fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../../fonts/IBMPlexSansArabic-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../../fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../../fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-family-primary: 'IBM Plex Sans Arabic', sans-serif;
    --bg-main:#ffffff;
    --bg-card:#f3f5f7;
    --bg-section:#ffffff;
    --bg-section-news:#F9FAFB;
    --bg-control:#EBEBEB;
    --color-main:#1F2A37;
    --color-secondary:#A1A3A5;
    --btn-primary:#BB9661;
    --btn-secondary:#505963;
    --nav-link-hover:#50596377;
    --bg-question:linear-gradient(26.57deg, #F9FAFB 8.33%, #F9FAFB 91.67%);
    
}

/* Dark Mode Variables */
[data-theme="dark"] {
    --bg-main:#1F2A37;
    --bg-card:#2A3643;
    --bg-section:#1F2A37;
    --bg-section-news:#38425033;
    --bg-control:#2A3643;
    --color-main:#ffffff;
    --color-secondary:#A1A3A5;
    --btn-primary:#BB9661;
    --btn-secondary:#505963;
    --nav-link-hover:#50596377;
    --bg-question:linear-gradient(26.57deg, #182230 8.33%, #344054 91.67%);
}

/* Apply the font family to the body */
body {
    font-family: var(--font-family-primary) !important;
    color: var(--color-main) !important;
    background-color: var(--bg-main) !important;
}

.woot-widget-bubble {
    background-color: var(--btn-primary) !important;
}

.woot-widget-holder {
    font-family: var(--font-family-primary) !important;
}

.form-control {
    background-color: var(--bg-control) !important;
    color: var(--color-main) !important;
    border: 1px solid #D2D6DB33;
}

.form-control::placeholder {
    color: var(--color-main) !important;
    opacity: 0.5 !important;
}


.form-control:focus {
    background-color: var(--bg-control) !important;
    color: var(--color-main) !important;
    border: 1px solid #D2D6DB33;
}