/* ===============================================
   assets/css/fonts.css
   نظام متغيرات الخط الصحيحة (Typography Design Tokens)
   الإصدار: 1.0.0
   =============================================== */

/* ===============================================
   1. استيراد الخطوط الخارجية
   =============================================== */

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/assets/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('../assets/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('../assets/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('../assets/fonts/IBMPlexSansArabic-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

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

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

/* ===============================================
   2. تعريف متغيرات الخط الصحيحة (Design Tokens)
   =============================================== */
:root {
    
    /* ---------------------------------------------
       2.1 الأسس الأساسية (Primitive Tokens)
       لا تتغير أبداً - تستخدم لبناء المتغيرات الأخرى
    --------------------------------------------- */
    
    /* عائلة الخطوط */
--font-family-sans: 'IBM Plex Sans Arabic', 'Noto Kufi Arabic', 'Tahoma', Arial, sans-serif;
    --font-family-serif: 'Times New Roman', serif;
    --font-family-mono: 'Courier New', monospace;
    
    /* أوزان الخطوط الأساسية */
    --font-weight-thin: 100;
    --font-weight-extra-light: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;
    
    /* تباعد الأسطر الأساسي */
    --line-height-none: 1;
    --line-height-tight: 1.2;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    
    /* تباعد الحروف الأساسي */
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;
    
    /* أحجام الخطوط الأساسية (بالبكسل) */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    --font-size-5xl: 3rem;        /* 48px */
    --font-size-6xl: 3.75rem;     /* 60px */
    --font-size-7xl: 4.5rem;      /* 72px */
    --font-size-8xl: 6rem;        /* 96px */
    --font-size-9xl: 8rem;        /* 128px */
    
    /* ---------------------------------------------
       2.2 متغيرات العرض (Display Tokens)
       للعناوين الكبيرة والهيرو واللاندينغ بيج
    --------------------------------------------- */
    
    /* Display 1 - الأكبر (للصفحات الرئيسية) */
    --display-1-font-family: var(--font-family-sans);
    --display-1-font-weight: var(--font-weight-bold);
    --display-1-font-size: clamp(3rem, 8vw, var(--font-size-8xl));
    --display-1-line-height: var(--line-height-tight);
    --display-1-letter-spacing: var(--letter-spacing-tighter);
    --display-1-text-transform: none;
    --display-1-text-decoration: none;
    
    /* Display 2 - كبير (للأقسام الرئيسية) */
    --display-2-font-family: var(--font-family-sans);
    --display-2-font-weight: var(--font-weight-bold);
    --display-2-font-size: clamp(2.5rem, 6vw, var(--font-size-6xl));
    --display-2-line-height: var(--line-height-tight);
    --display-2-letter-spacing: var(--letter-spacing-tight);
    --display-2-text-transform: none;
    --display-2-text-decoration: none;
    
    /* Display 3 - متوسط (للعناوين الفرعية الكبيرة) */
    --display-3-font-family: var(--font-family-sans);
    --display-3-font-weight: var(--font-weight-semi-bold);
    --display-3-font-size: clamp(2rem, 5vw, var(--font-size-5xl));
    --display-3-line-height: var(--line-height-tight);
    --display-3-letter-spacing: var(--letter-spacing-normal);
    --display-3-text-transform: none;
    --display-3-text-decoration: none;
    
    /* Display 4 - صغير (للعناوين الداخلية) */
    --display-4-font-family: var(--font-family-sans);
    --display-4-font-weight: var(--font-weight-semi-bold);
    --display-4-font-size: clamp(1.5rem, 4vw, var(--font-size-4xl));
    --display-4-line-height: var(--line-height-snug);
    --display-4-letter-spacing: var(--letter-spacing-normal);
    --display-4-text-transform: none;
    --display-4-text-decoration: none;
    
    /* ---------------------------------------------
       2.3 متغيرات النصوص (Text Tokens)
       للمحتوى العام والفقرة
    --------------------------------------------- */
    
    /* Text XL - كبير جداً (للاقتباسات البارزة) */
    --text-xl-font-family: var(--font-family-sans);
    --text-xl-font-weight: var(--font-weight-regular);
    --text-xl-font-size: var(--font-size-xl);
    --text-xl-line-height: var(--line-height-relaxed);
    --text-xl-letter-spacing: var(--letter-spacing-normal);
    --text-xl-paragraph-spacing: 1.5rem;
    
    /* Text Large - كبير (للتمهيد) */
    --text-large-font-family: var(--font-family-sans);
    --text-large-font-weight: var(--font-weight-regular);
    --text-large-font-size: var(--font-size-lg);
    --text-large-line-height: var(--line-height-relaxed);
    --text-large-letter-spacing: var(--letter-spacing-normal);
    --text-large-paragraph-spacing: 1.25rem;
    
    /* Text Base - عادي (النص الأساسي) */
    --text-base-font-family: var(--font-family-sans);
    --text-base-font-weight: var(--font-weight-regular);
    --text-base-font-size: var(--font-size-base);
    --text-base-line-height: var(--line-height-relaxed);
    --text-base-letter-spacing: var(--letter-spacing-normal);
    --text-base-paragraph-spacing: 1rem;
    
    /* Text Small - صغير (للوصف) */
    --text-small-font-family: var(--font-family-sans);
    --text-small-font-weight: var(--font-weight-regular);
    --text-small-font-size: var(--font-size-sm);
    --text-small-line-height: var(--line-height-normal);
    --text-small-letter-spacing: var(--letter-spacing-normal);
    --text-small-paragraph-spacing: 0.75rem;
    
    /* Text XS - صغير جداً (للحواشي) */
    --text-xs-font-family: var(--font-family-sans);
    --text-xs-font-weight: var(--font-weight-light);
    --text-xs-font-size: var(--font-size-xs);
    --text-xs-line-height: var(--line-height-normal);
    --text-xs-letter-spacing: var(--letter-spacing-wide);
    --text-xs-paragraph-spacing: 0.5rem;
    
    /* ---------------------------------------------
       2.4 متغيرات النصوص الغامقة (Semibold Tokens)
       للعناوين الصغيرة والروابط البارزة
    --------------------------------------------- */
    
    /* Semibold Large */
    --text-semibold-large-font-family: var(--font-family-sans);
    --text-semibold-large-font-weight: var(--font-weight-semi-bold);
    --text-semibold-large-font-size: var(--font-size-lg);
    --text-semibold-large-line-height: var(--line-height-normal);
    --text-semibold-large-letter-spacing: var(--letter-spacing-normal);
    
    /* Semibold Base */
    --text-semibold-base-font-family: var(--font-family-sans);
    --text-semibold-base-font-weight: var(--font-weight-semi-bold);
    --text-semibold-base-font-size: var(--font-size-base);
    --text-semibold-base-line-height: var(--line-height-normal);
    --text-semibold-base-letter-spacing: var(--letter-spacing-normal);
    
    /* Semibold Small */
    --text-semibold-small-font-family: var(--font-family-sans);
    --text-semibold-small-font-weight: var(--font-weight-semi-bold);
    --text-semibold-small-font-size: var(--font-size-sm);
    --text-semibold-small-line-height: var(--line-height-normal);
    --text-semibold-small-letter-spacing: var(--letter-spacing-wide);
    
    /* ---------------------------------------------
       2.5 متغيرات العناوين (Heading Tokens)
       للعناوين داخل المحتوى (h1-h6)
    --------------------------------------------- */
    
    /* H1 */
    --heading-h1-font-family: var(--font-family-sans);
    --heading-h1-font-weight: var(--font-weight-bold);
    --heading-h1-font-size: var(--font-size-4xl);
    --heading-h1-line-height: var(--line-height-tight);
    --heading-h1-letter-spacing: var(--letter-spacing-tight);
    --heading-h1-margin-bottom: 1.5rem;
    
    /* H2 */
    --heading-h2-font-family: var(--font-family-sans);
    --heading-h2-font-weight: var(--font-weight-bold);
    --heading-h2-font-size: var(--font-size-3xl);
    --heading-h2-line-height: var(--line-height-tight);
    --heading-h2-letter-spacing: var(--letter-spacing-normal);
    --heading-h2-margin-bottom: 1.25rem;
    
    /* H3 */
    --heading-h3-font-family: var(--font-family-sans);
    --heading-h3-font-weight: var(--font-weight-semi-bold);
    --heading-h3-font-size: var(--font-size-2xl);
    --heading-h3-line-height: var(--line-height-snug);
    --heading-h3-letter-spacing: var(--letter-spacing-normal);
    --heading-h3-margin-bottom: 1rem;
    
    /* H4 */
    --heading-h4-font-family: var(--font-family-sans);
    --heading-h4-font-weight: var(--font-weight-semi-bold);
    --heading-h4-font-size: var(--font-size-xl);
    --heading-h4-line-height: var(--line-height-normal);
    --heading-h4-letter-spacing: var(--letter-spacing-normal);
    --heading-h4-margin-bottom: 0.875rem;
    
    /* H5 */
    --heading-h5-font-family: var(--font-family-sans);
    --heading-h5-font-weight: var(--font-weight-medium);
    --heading-h5-font-size: var(--font-size-lg);
    --heading-h5-line-height: var(--line-height-normal);
    --heading-h5-letter-spacing: var(--letter-spacing-wide);
    --heading-h5-margin-bottom: 0.75rem;
    
    /* H6 */
    --heading-h6-font-family: var(--font-family-sans);
    --heading-h6-font-weight: var(--font-weight-medium);
    --heading-h6-font-size: var(--font-size-base);
    --heading-h6-line-height: var(--line-height-normal);
    --heading-h6-letter-spacing: var(--letter-spacing-wider);
    --heading-h6-margin-bottom: 0.5rem;
    
    /* ---------------------------------------------
       2.6 متغيرات خاصة (Special Tokens)
       للعناصر التفاعلية والخاصة
    --------------------------------------------- */
    
    /* Button - الأزرار */
    --button-font-family: var(--font-family-sans);
    --button-font-weight: var(--font-weight-medium);
    --button-font-size: var(--font-size-base);
    --button-line-height: var(--line-height-normal);
    --button-letter-spacing: var(--letter-spacing-wide);
    --button-text-transform: none;
    
    /* Link - الروابط */
    --link-font-family: var(--font-family-sans);
    --link-font-weight: var(--font-weight-medium);
    --link-font-size: var(--font-size-base);
    --link-line-height: var(--line-height-normal);
    --link-letter-spacing: var(--letter-spacing-normal);
    --link-text-decoration: underline;
    --link-text-decoration-hover: none;
    
    /* Code - الأكواد */
    --code-font-family: var(--font-family-mono);
    --code-font-weight: var(--font-weight-regular);
    --code-font-size: var(--font-size-sm);
    --code-line-height: var(--line-height-normal);
    --code-letter-spacing: var(--letter-spacing-normal);
    
    /* Quote - الاقتباسات */
    --quote-font-family: var(--font-family-serif);
    --quote-font-weight: var(--font-weight-light);
    --quote-font-size: var(--font-size-xl);
    --quote-line-height: var(--line-height-relaxed);
    --quote-letter-spacing: var(--letter-spacing-normal);
    --quote-font-style: italic;
    
       --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 48px;
    --spacing-4xl: 64px;
    --spacing-5xl: 96px;
}

/* ===============================================
   3. تطبيق المتغيرات على العناصر الأساسية
   =============================================== */

/* الجسم الأساسي */
body {
    font-family: var(--text-base-font-family, 'IBM Plex Sans Arabic', Tahoma, sans-serif);
    font-weight: var(--text-base-font-weight);
    font-size: var(--text-base-font-size);
    line-height: var(--text-base-line-height);
    letter-spacing: var(--text-base-letter-spacing);
}

/* العناوين */
h1 {
    font-family: var(--heading-h1-font-family);
    font-weight: var(--heading-h1-font-weight);
    font-size: var(--heading-h1-font-size);
    line-height: var(--heading-h1-line-height);
    letter-spacing: var(--heading-h1-letter-spacing);
    margin-bottom: var(--heading-h1-margin-bottom);
}

h2 {
    font-family: var(--heading-h2-font-family);
    font-weight: var(--heading-h2-font-weight);
    font-size: var(--heading-h2-font-size);
    line-height: var(--heading-h2-line-height);
    letter-spacing: var(--heading-h2-letter-spacing);
    margin-bottom: var(--heading-h2-margin-bottom);
}

h3 {
    font-family: var(--heading-h3-font-family);
    font-weight: var(--heading-h3-font-weight);
    font-size: var(--heading-h3-font-size);
    line-height: var(--heading-h3-line-height);
    letter-spacing: var(--heading-h3-letter-spacing);
    margin-bottom: var(--heading-h3-margin-bottom);
}

h4 {
    font-family: var(--heading-h4-font-family);
    font-weight: var(--heading-h4-font-weight);
    font-size: var(--heading-h4-font-size);
    line-height: var(--heading-h4-line-height);
    letter-spacing: var(--heading-h4-letter-spacing);
    margin-bottom: var(--heading-h4-margin-bottom);
}

h5 {
    font-family: var(--heading-h5-font-family);
    font-weight: var(--heading-h5-font-weight);
    font-size: var(--heading-h5-font-size);
    line-height: var(--heading-h5-line-height);
    letter-spacing: var(--heading-h5-letter-spacing);
    margin-bottom: var(--heading-h5-margin-bottom);
}

h6 {
    font-family: var(--heading-h6-font-family);
    font-weight: var(--heading-h6-font-weight);
    font-size: var(--heading-h6-font-size);
    line-height: var(--heading-h6-line-height);
    letter-spacing: var(--heading-h6-letter-spacing);
    margin-bottom: var(--heading-h6-margin-bottom);
}

/* الفقرات */
p {
    font-family: var(--text-base-font-family);
    font-weight: var(--text-base-font-weight);
    font-size: var(--text-base-font-size);
    line-height: var(--text-base-line-height);
    letter-spacing: var(--text-base-letter-spacing);
    margin-bottom: var(--text-base-paragraph-spacing);
}

/* الروابط */
a {
    font-family: var(--link-font-family);
    font-weight: var(--link-font-weight);
    font-size: var(--link-font-size);
    line-height: var(--link-line-height);
    letter-spacing: var(--link-letter-spacing);
    text-decoration: var(--link-text-decoration);
}

a:hover {
    text-decoration: var(--link-text-decoration-hover);
}

/* الأزرار */
button,
.btn {
    font-family: var(--button-font-family);
    font-weight: var(--button-font-weight);
    font-size: var(--button-font-size);
    line-height: var(--button-line-height);
    letter-spacing: var(--button-letter-spacing);
    text-transform: var(--button-text-transform);
}

/* ===============================================
   4. كلاسات مساعدة (Utility Classes)
   =============================================== */

/* كلاسات العرض (Display) */
.display-1 {
    font-family: var(--display-1-font-family);
    font-weight: var(--display-1-font-weight);
    font-size: var(--display-1-font-size);
    line-height: var(--display-1-line-height);
    letter-spacing: var(--display-1-letter-spacing);
    text-transform: var(--display-1-text-transform);
    text-decoration: var(--display-1-text-decoration);
}

.display-2 {
    font-family: var(--display-2-font-family);
    font-weight: var(--display-2-font-weight);
    font-size: var(--display-2-font-size);
    line-height: var(--display-2-line-height);
    letter-spacing: var(--display-2-letter-spacing);
    text-transform: var(--display-2-text-transform);
    text-decoration: var(--display-2-text-decoration);
}

.display-3 {
    font-family: var(--display-3-font-family);
    font-weight: var(--display-3-font-weight);
    font-size: var(--display-3-font-size);
    line-height: var(--display-3-line-height);
    letter-spacing: var(--display-3-letter-spacing);
    text-transform: var(--display-3-text-transform);
    text-decoration: var(--display-3-text-decoration);
}

.display-4 {
    font-family: var(--display-4-font-family);
    font-weight: var(--display-4-font-weight);
    font-size: var(--display-4-font-size);
    line-height: var(--display-4-line-height);
    letter-spacing: var(--display-4-letter-spacing);
    text-transform: var(--display-4-text-transform);
    text-decoration: var(--display-4-text-decoration);
}

/* كلاسات النصوص */
.text-xl {
    font-family: var(--text-xl-font-family);
    font-weight: var(--text-xl-font-weight);
    font-size: var(--text-xl-font-size);
    line-height: var(--text-xl-line-height);
    letter-spacing: var(--text-xl-letter-spacing);
}

.text-large {
    font-family: var(--text-large-font-family);
    font-weight: var(--text-large-font-weight);
    font-size: var(--text-large-font-size);
    line-height: var(--text-large-line-height);
    letter-spacing: var(--text-large-letter-spacing);
}

.text-base {
    font-family: var(--text-base-font-family);
    font-weight: var(--text-base-font-weight);
    font-size: var(--text-base-font-size);
    line-height: var(--text-base-line-height);
    letter-spacing: var(--text-base-letter-spacing);
}

.text-small {
    font-family: var(--text-small-font-family);
    font-weight: var(--text-small-font-weight);
    font-size: var(--text-small-font-size);
    line-height: var(--text-small-line-height);
    letter-spacing: var(--text-small-letter-spacing);
}

.text-xs {
    font-family: var(--text-xs-font-family);
    font-weight: var(--text-xs-font-weight);
    font-size: var(--text-xs-font-size);
    line-height: var(--text-xs-line-height);
    letter-spacing: var(--text-xs-letter-spacing);
}

/* كلاسات النصوص الغامقة */
.text-semibold-large {
    font-family: var(--text-semibold-large-font-family);
    font-weight: var(--text-semibold-large-font-weight);
    font-size: var(--text-semibold-large-font-size);
    line-height: var(--text-semibold-large-line-height);
    letter-spacing: var(--text-semibold-large-letter-spacing);
}

.text-semibold-base {
    font-family: var(--text-semibold-base-font-family);
    font-weight: var(--text-semibold-base-font-weight);
    font-size: var(--text-semibold-base-font-size);
    line-height: var(--text-semibold-base-line-height);
    letter-spacing: var(--text-semibold-base-letter-spacing);
}

.text-semibold-small {
    font-family: var(--text-semibold-small-font-family);
    font-weight: var(--text-semibold-small-font-weight);
    font-size: var(--text-semibold-small-font-size);
    line-height: var(--text-semibold-small-line-height);
    letter-spacing: var(--text-semibold-small-letter-spacing);
}

/* كلاسات الأوزان */
.font-thin { font-weight: var(--font-weight-thin); }
.font-extra-light { font-weight: var(--font-weight-extra-light); }
.font-light { font-weight: var(--font-weight-light); }
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semi-bold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extra-bold { font-weight: var(--font-weight-extra-bold); }
.font-black { font-weight: var(--font-weight-black); }

/* كلاسات تباعد الأسطر */
.line-height-none { line-height: var(--line-height-none); }
.line-height-tight { line-height: var(--line-height-tight); }
.line-height-snug { line-height: var(--line-height-snug); }
.line-height-normal { line-height: var(--line-height-normal); }
.line-height-relaxed { line-height: var(--line-height-relaxed); }
.line-height-loose { line-height: var(--line-height-loose); }

/* كلاسات تباعد الحروف */
.letter-tighter { letter-spacing: var(--letter-spacing-tighter); }
.letter-tight { letter-spacing: var(--letter-spacing-tight); }
.letter-normal { letter-spacing: var(--letter-spacing-normal); }
.letter-wide { letter-spacing: var(--letter-spacing-wide); }
.letter-wider { letter-spacing: var(--letter-spacing-wider); }
.letter-widest { letter-spacing: var(--letter-spacing-widest); }

/* كلاسات خاصة */
code, .code {
    font-family: var(--code-font-family);
    font-weight: var(--code-font-weight);
    font-size: var(--code-font-size);
    line-height: var(--code-line-height);
    letter-spacing: var(--code-letter-spacing);
}

blockquote, .quote {
    font-family: var(--quote-font-family);
    font-weight: var(--quote-font-weight);
    font-size: var(--quote-font-size);
    line-height: var(--quote-line-height);
    letter-spacing: var(--quote-letter-spacing);
    font-style: var(--quote-font-style);
}

/* ===============================================
   5. دعم الشاشات الصغيرة (Responsive)
   =============================================== */
@media (max-width: 768px) {
    :root {
        --heading-h1-font-size: var(--font-size-3xl);
        --heading-h2-font-size: var(--font-size-2xl);
        --heading-h3-font-size: var(--font-size-xl);
        --text-xl-font-size: var(--font-size-lg);
    }
}

@media (max-width: 480px) {
    :root {
        --heading-h1-font-size: var(--font-size-2xl);
        --heading-h2-font-size: var(--font-size-xl);
        --text-base-font-size: var(--font-size-sm);
    }
}