/* 
   Global Theme Variables
   This file contains all the colors and typography settings for the website.
   Using variables makes it easy to change the theme in one place.
*/

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root {
    /* Global primary theme color used across header, buttons, and navigation */
    --primary-color: #104631;
    /* Darker shade of the primary color for interactive states like hover and sub-headers */
    --primary-dark: #135d3d;
    /* Secondary accent color for supplementary UI elements */
    --secondary-color: #6c757d;
    /* Typography */
    --font-family: 'IBM Plex Sans Arabic';
    /* Background and text colors */
    --background-color: #ffffff;
    --text-color: #212529;
    /* Default text color */
    --heading-color: #000000;
    /* Standard link color - follows the primary brand color */
    --link-color: var(--primary-color);
    --card-background: #f8f9fa;
    --border-color: #dee2e6;
    /* Functional colors */
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --accent-color: #6ad9ec;
    /* Neutral colors - common across the project */
    --white: #ffffff;
    --black: #000000;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    /* Semantic assignments */
    --body-bg: var(--white);
    --body-color: var(--gray-900);
    --muted-color: var(--gray-600);
    --border-light: var(--gray-300);
    /* Shadows and Overlays */
    --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
    --shadow-md: 0 .5rem 1rem rgba(0, 0, 0, .15);
    --overlay-dark: rgba(0, 0, 0, 0.5);
}

/* 
   Global Typography Settings
   Applying IBM Plex Sans Arabic to everything to ensure consistency.
   Icon fonts (Font Awesome) are excluded to ensure icons display correctly.
*/
html,
body {
    font-family: var(--font-family);
}

/* Specific restoration for Font Awesome icons */
.fa,
.fas,
.far,
.fal,
.fad,
.fab {
    font-family: "Font Awesome 5 Free" !important;
}

.fab {
    font-family: "Font Awesome 5 Brands" !important;
}

.fas {
    font-weight: 900 !important;
}

/* Utility Classes for clean layout */
.lang-toggle-btn,
.logout-icon-btn {
    font-size: 15px;
    margin-right: 1rem;
    padding: 5px;
    color: #fff !important;
    /* White for header contrast */
    text-decoration: none;
}

.lang-toggle-btn:hover,
.logout-icon-btn:hover {
    color: var(--primary-color) !important;
}

/* Footer Utility Classes */
.footer-link-item {
    color: var(--primary-dark) !important;
    font-size: 18px;
}

.footer-contact-text {
    font-size: 14px;
    line-height: 20px;
    padding: 8px 0;
    color: inherit;
    opacity: 0.8;
}

/* 
   Footer & Social Icons
   Using primary-dark to ensure social icons follow the brand theme while remaining legible.
*/
.footer-social-icon {
    color: var(--primary-dark) !important;
    font-size: 25px;
}


/* 
   Base Font Application
   Setting the brand font for common text elements.
*/
body,
input,
textarea,
button,
select,
label,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
div {
    font-family: var(--font-family);
}

/* Multi-Language Layout Direction */
html[lang="ar"] {
    direction: rtl;
}

html[lang="en"] {
    direction: ltr;
}