/* ========================================
   GOOGLE FONTS - Multi-Language Support
   Using Smart Font Stack for Auto Detection
   ======================================== */

/* Import Varela Round for Latin/English (single weight: 400) */
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

/* Import Tajawal for Arabic (multiple weights) */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');


/* ========================================
   CSS VARIABLES - Easy Customization
   ======================================== */

:root {
    /* SMART FONT STACK - Tajawal for Arabic, Varela Round for English */
    --font-primary: 'Tajawal', 'Varela Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-english: 'Varela Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-arabic: 'Tajawal', 'Varela Round', sans-serif;
    
    /* FONT WEIGHTS - Easy to adjust */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    /* FONT SIZES - Consistent scaling */
    --font-xs: 0.75rem;    /* 12px */
    --font-sm: 0.875rem;   /* 14px */
    --font-base: 1rem;     /* 16px */
    --font-lg: 1.125rem;   /* 18px */
    --font-xl: 1.25rem;    /* 20px */
    --font-2xl: 1.5rem;    /* 24px */
    --font-3xl: 1.875rem;  /* 30px */
    --font-4xl: 2.25rem;   /* 36px */
    --font-5xl: 3rem;      /* 48px */
}


/* ========================================
   APPLY FONTS TO ELEMENTS
   Language-specific font application
   ======================================== */

/* Default - Apply primary font to all elements (EXCEPT icons) */
*:not([class*="ti-"]):not([class*="fa-"]):not([class*="icon"]):not(i),
html,
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p:not([class*="ti-"]):not([class*="fa-"]), 
span:not([class*="ti-"]):not([class*="fa-"]):not([class*="icon"]), 
div:not([class*="ti-"]):not([class*="fa-"]), 
a:not([class*="ti-"]):not([class*="fa-"]), 
li:not([class*="ti-"]):not([class*="fa-"]),
button:not([class*="ti-"]):not([class*="fa-"]), 
.btn,
input, textarea, select,
.form-control, label,
td, th, table,
.card, .modal, .sidebar,
.navbar, .dropdown {
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Arabic Language - Use Tajawal */
html[lang="ar"] *:not([class*="ti-"]):not([class*="fa-"]):not([class*="icon"]):not(i),
html[lang="ar"] body,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] p:not([class*="ti-"]):not([class*="fa-"]), 
html[lang="ar"] span:not([class*="ti-"]):not([class*="fa-"]):not([class*="icon"]), 
html[lang="ar"] div:not([class*="ti-"]):not([class*="fa-"]),
html[lang="ar"] button:not([class*="ti-"]):not([class*="fa-"]), 
html[lang="ar"] input, html[lang="ar"] textarea,
html[lang="ar"] select, html[lang="ar"] label, 
html[lang="ar"] a:not([class*="ti-"]):not([class*="fa-"]) {
    font-family: var(--font-arabic) !important;
}

/* English Language - Use Varela Round */
html[lang="en"] *:not([class*="ti-"]):not([class*="fa-"]):not([class*="icon"]):not(i),
html[lang="en"] body,
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3,
html[lang="en"] h4, html[lang="en"] h5, html[lang="en"] h6,
html[lang="en"] p:not([class*="ti-"]):not([class*="fa-"]), 
html[lang="en"] span:not([class*="ti-"]):not([class*="fa-"]):not([class*="icon"]), 
html[lang="en"] div:not([class*="ti-"]):not([class*="fa-"]),
html[lang="en"] button:not([class*="ti-"]):not([class*="fa-"]), 
html[lang="en"] input, html[lang="en"] textarea,
html[lang="en"] select, html[lang="en"] label, 
html[lang="en"] a:not([class*="ti-"]):not([class*="fa-"]) {
    font-family: var(--font-english) !important;
}

/* PROTECT ICON FONTS - Never apply custom fonts to icons */
[class*="ti-"],
[class*="fa-"],
[class*="icon"],
.iconify,
.iconify-icon,
i {
    font-family: inherit !important;
}

/* Set base font properties */
body {
    font-weight: var(--font-regular);
    font-size: var(--font-base);
}

/* Headings - Bold weight */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: var(--font-bold);
}

/* Buttons - Medium weight */
button, .btn,
input[type="button"],
input[type="submit"] {
    font-weight: var(--font-medium);
}

/* Code & Monospace - Exclude from AppFont */
code, pre, kbd, samp {
    font-family: 'Courier New', 'Consolas', monospace !important;
}


/* ========================================
   UTILITY CLASSES - Font Weights
   ======================================== */

.font-light { font-weight: var(--font-light); }
.font-regular { font-weight: var(--font-regular); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }


/* ========================================
   UTILITY CLASSES - Font Sizes
   ======================================== */

.text-xs { font-size: var(--font-xs); }
.text-sm { font-size: var(--font-sm); }
.text-base { font-size: var(--font-base); }
.text-lg { font-size: var(--font-lg); }
.text-xl { font-size: var(--font-xl); }
.text-2xl { font-size: var(--font-2xl); }
.text-3xl { font-size: var(--font-3xl); }
.text-4xl { font-size: var(--font-4xl); }
.text-5xl { font-size: var(--font-5xl); }


/* ========================================
   UTILITY CLASSES - Font Families
   ======================================== */

.font-primary { font-family: var(--font-primary); }


/* ========================================
   HOW IT WORKS - UNICODE-RANGE METHOD:
   
   ✨ NO JAVASCRIPT NEEDED! ✨
   
   The browser automatically detects character types:
   - English text (a-z, A-Z) → Uses Inter font
   - Arabic text (ا-ي) → Uses Cairo font
   - Mixed text → Each character gets correct font
   
   ADVANTAGES:
   ✓ Zero configuration needed
   ✓ Works instantly with any language mix
   ✓ No JavaScript overhead
   ✓ Perfect font rendering for each script
   ✓ Supports unlimited languages
   
   ========================================
   HOW TO CHANGE FONTS:
   
   1. CHANGE LATIN FONT (English):
      - Import new font at top
      - Update "Latin Characters" @font-face
      Example: Change 'Inter' to 'Roboto'
   
   2. CHANGE ARABIC FONT:
      - Import new font at top
      - Update "Arabic Characters" @font-face
      Example: Change 'Cairo' to 'Tajawal'
   
   3. ADD NEW LANGUAGE:
      - Find unicode range for your language
      - Add new @font-face with that range
   
   UNICODE RANGES:
   - Latin: U+0000-00FF
   - Arabic: U+0600-06FF
   - Cyrillic: U+0400-04FF
   - Greek: U+0370-03FF
   - Hebrew: U+0590-05FF
   - Chinese: U+4E00-9FFF
   - Japanese: U+3040-309F, U+30A0-30FF
   
   POPULAR FONT ALTERNATIVES:
   
   Modern Latin Fonts:
   - Poppins
   - Montserrat
   - Roboto
   - Open Sans
   - Work Sans
   
   Arabic Fonts:
   - Cairo (current - modern)
   - Tajawal (clean)
   - Almarai (simple)
   - Changa (bold)
   - IBM Plex Sans Arabic
   - Noto Sans Arabic
   
   ======================================== */