/**
 * سِفر قيس Platform - Enhanced Unified Design System & Visual Excellence
 * Phase 2: Sophisticated Arabic Scholarly Design Foundation
 * 
 * A refined design system ensuring perfect visual consistency while
 * celebrating Arabic scholarly traditions and modern usability excellence.
 * 
 * Integration: Harmonizes with styles.css foundation authority
 * Enhancement: Adds sophisticated Arabic typography and scholarly components
 * 
 * "إِنَّ اللَّهَ جَمِيلٌ يُحِبُّ الْجَمَالَ"
 * (Indeed, Allah is beautiful and He loves beauty) - Hadith
 */

/* ===== FOUNDATION INTEGRATION & TOKEN CONSOLIDATION ===== */
:root {
    /* === Foundation Alignment with styles.css === */
    /* Primary colors aligned with foundation authority */
    --primary-50: #faf8f5;
    --primary-100: #f5f1ea;
    --primary-200: #ebe3d5;
    --primary-300: #dcc9b0;
    --primary-400: #c9a961;
    --primary-500: #4A5568;  /* Aligned with --primary-color from styles.css */
    --primary-600: #a17b47;
    --primary-700: #8a5a44;  /* Aligned with --accent-color from styles.css */
    --primary-800: #6f4937;
    --primary-900: #2D3748;  /* Aligned with --primary-dark from styles.css */
    
    /* === Enhanced Arabic Scholarly Color Palette === */
    /* Traditional Islamic manuscript colors */
    --manuscript-gold: #D4A574;        /* Rich manuscript gold */
    --manuscript-blue: #1B4A72;        /* Deep scholarly blue */
    --manuscript-green: #2A5530;       /* Islamic green */
    --manuscript-red: #8B2C2C;         /* Scholarly red */
    --manuscript-purple: #5B3A8C;      /* Royal purple */
    
    /* Calligraphy and text colors */
    --calligraphy-black: #1C1C1C;      /* Pure calligraphy black */
    --ink-brown: #3D2817;              /* Traditional ink brown */
    --parchment-cream: #FBF8F1;        /* Authentic parchment */
    --papyrus-beige: #F4F1E8;          /* Ancient papyrus */
    
    /* Sacred geometry accent colors */
    --geometric-gold: #C9A961;         /* Sacred geometry gold */
    --geometric-silver: #A8A8A8;       /* Sacred geometry silver */
    --geometric-copper: #B87333;       /* Sacred geometry copper */
    
    /* === Sophisticated Accent System === */
    --accent-primary: #8A5A44;         /* Aligned with styles.css --accent-color */
    --accent-secondary: #2C5282;       /* Scholarly blue accent */
    --accent-tertiary: #276749;        /* Islamic green accent */
    --accent-quaternary: #8B2C2C;      /* Scholarly red accent */
    
    /* Accent variations for sophisticated theming */
    --accent-light: #C8B6A6;           /* Aligned with styles.css */
    --accent-lighter: #E5D7C8;         /* Extended palette */
    --accent-dark: #6B4432;            /* Extended palette */
    --accent-darker: #4A2F22;          /* Extended palette */
    
    /* === Refined Neutral System === */
    /* Enhanced grayscale with warm undertones */
    --neutral-50: #fafafa;
    --neutral-100: #f5f5f5;
    --neutral-200: #eeeeee;
    --neutral-300: #e0e0e0;
    --neutral-400: #bdbdbd;
    --neutral-500: #9e9e9e;
    --neutral-600: #757575;
    --neutral-700: #616161;
    --neutral-800: #424242;
    --neutral-900: #212121;
    
    /* Warm neutrals for scholarly aesthetic */
    --warm-neutral-50: #faf9f7;
    --warm-neutral-100: #f3f1ed;
    --warm-neutral-200: #e8e4dd;
    --warm-neutral-300: #d4ccc0;
    --warm-neutral-400: #a89b87;
    --warm-neutral-500: #8b7d6b;
    --warm-neutral-600: #6d5f4d;
    --warm-neutral-700: #5a4d3b;
    --warm-neutral-800: #3f362a;
    --warm-neutral-900: #2d251c;
    
    /* === Enhanced Semantic Colors === */
    --success-color: #276749;          /* Islamic green */
    --success-light: #4a8b6d;
    --success-dark: #1d4a34;
    --success-bg: rgba(39, 103, 73, 0.1);
    
    --warning-color: #f39c12;          /* Amber warning */
    --warning-light: #f5b041;
    --warning-dark: #d68910;
    --warning-bg: rgba(243, 156, 18, 0.1);
    
    --error-color: #8B2C2C;            /* Scholarly red */
    --error-light: #a94442;
    --error-dark: #6d2323;
    --error-bg: rgba(139, 44, 44, 0.1);
    
    --info-color: #2C5282;             /* Scholarly blue */
    --info-light: #3a6ba8;
    --info-dark: #1f3a5f;
    --info-bg: rgba(44, 82, 130, 0.1);
    
    /* === Sophisticated Typography System === */
    /* Enhanced Arabic font hierarchy */
    --font-display: 'Scheherazade New', 'Amiri', 'Times New Roman', serif;      /* Quranic and display text */
    --font-heading: 'Cairo', 'Segoe UI', system-ui, sans-serif;                 /* Modern Arabic headings */
    --font-body: 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif;      /* Body text */
    --font-manuscript: 'Noto Naskh Arabic', 'Amiri', serif;                     /* Manuscript simulation */
    --font-calligraphy: 'Amiri Quran', 'Amiri', serif;                         /* Calligraphic text */
    --font-poetry: 'Amiri', 'Georgia', 'Times New Roman', serif;                /* Poetry and literature */
    --font-mono: 'IBM Plex Mono Arabic', 'Courier New', monospace;              /* Code and technical */
    
    /* Typography scale with Arabic consideration */
    --font-scale: 1.25;                /* Modular scale ratio */
    --text-xs: 0.75rem;               /* 12px */
    --text-sm: 0.875rem;              /* 14px */
    --text-base: 1rem;                /* 16px */
    --text-lg: 1.125rem;              /* 18px */
    --text-xl: 1.25rem;               /* 20px */
    --text-2xl: 1.5rem;               /* 24px */
    --text-3xl: 1.875rem;             /* 30px */
    --text-4xl: 2.25rem;              /* 36px */
    --text-5xl: 3rem;                 /* 48px */
    --text-6xl: 3.75rem;              /* 60px */
    --text-7xl: 4.5rem;               /* 72px */
    --text-8xl: 6rem;                 /* 96px */
    
    /* Font weights optimized for Arabic */
    --font-thin: 100;
    --font-extralight: 200;
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
    
    /* Line heights for Arabic readability */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    --leading-arabic: 2.2;            /* Special for Arabic poetry */
    
    /* Letter spacing for Arabic optimization */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --tracking-arabic: 0.02em;        /* Optimized for Arabic */
    
    /* Word spacing for Arabic text */
    --word-spacing-normal: 0;
    --word-spacing-wide: 0.1em;
    --word-spacing-wider: 0.15em;
    --word-spacing-arabic: 0.15em;    /* Enhanced Arabic readability */
    
    /* === Enhanced Spacing System === */
    /* Aligned with styles.css foundation */
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 0.125rem;            /* 2px */
    --space-1: 0.25rem;               /* 4px - aligned with styles.css */
    --space-1-5: 0.375rem;            /* 6px */
    --space-2: 0.5rem;                /* 8px - aligned with styles.css */
    --space-2-5: 0.625rem;            /* 10px */
    --space-3: 0.75rem;               /* 12px - aligned with styles.css */
    --space-3-5: 0.875rem;            /* 14px */
    --space-4: 1rem;                  /* 16px - aligned with styles.css */
    --space-5: 1.25rem;               /* 20px - aligned with styles.css */
    --space-6: 1.5rem;                /* 24px - aligned with styles.css */
    --space-7: 1.75rem;               /* 28px */
    --space-8: 2rem;                  /* 32px - aligned with styles.css */
    --space-9: 2.25rem;               /* 36px */
    --space-10: 2.5rem;               /* 40px - aligned with styles.css */
    --space-11: 2.75rem;              /* 44px */
    --space-12: 3rem;                 /* 48px - aligned with styles.css */
    --space-14: 3.5rem;               /* 56px */
    --space-16: 4rem;                 /* 64px */
    --space-20: 5rem;                 /* 80px */
    --space-24: 6rem;                 /* 96px */
    --space-28: 7rem;                 /* 112px */
    --space-32: 8rem;                 /* 128px */
    --space-36: 9rem;                 /* 144px */
    --space-40: 10rem;                /* 160px */
    --space-44: 11rem;                /* 176px */
    --space-48: 12rem;                /* 192px */
    --space-52: 13rem;                /* 208px */
    --space-56: 14rem;                /* 224px */
    --space-60: 15rem;                /* 240px */
    --space-64: 16rem;                /* 256px */
    --space-72: 18rem;                /* 288px */
    --space-80: 20rem;                /* 320px */
    --space-96: 24rem;                /* 384px */
    
    /* === Enhanced Border Radius System === */
    --radius-none: 0;
    --radius-sm: 0.125rem;            /* 2px */
    --radius-base: 0.25rem;           /* 4px */
    --radius-md: 0.375rem;            /* 6px */
    --radius-lg: 0.5rem;              /* 8px - aligned with styles.css */
    --radius-xl: 0.75rem;             /* 12px */
    --radius-2xl: 1rem;               /* 16px */
    --radius-3xl: 1.5rem;             /* 24px */
    --radius-4xl: 2rem;               /* 32px */
    --radius-full: 9999px;            /* Perfect circle */
    
    /* Special radius for manuscript aesthetics */
    --radius-manuscript: 0.625rem;    /* 10px - manuscript corner style */
    --radius-ornamental: 1.25rem;     /* 20px - ornamental elements */
    
    /* === Sophisticated Shadow System === */
    /* Enhanced shadows with warm undertones */
    --shadow-xs: 0 1px 2px 0 rgba(89, 59, 45, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(89, 59, 45, 0.1), 0 1px 2px 0 rgba(89, 59, 45, 0.06);
    --shadow-base: 0 4px 6px -1px rgba(89, 59, 45, 0.1), 0 2px 4px -1px rgba(89, 59, 45, 0.06);
    --shadow-md: 0 10px 15px -3px rgba(89, 59, 45, 0.1), 0 4px 6px -2px rgba(89, 59, 45, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(89, 59, 45, 0.1), 0 10px 10px -5px rgba(89, 59, 45, 0.04);
    --shadow-xl: 0 25px 50px -12px rgba(89, 59, 45, 0.25);
    --shadow-2xl: 0 35px 60px -15px rgba(89, 59, 45, 0.3);
    --shadow-inner: inset 0 2px 4px 0 rgba(89, 59, 45, 0.06);
    --shadow-none: none;
    
    /* Manuscript-inspired shadows */
    --shadow-manuscript: 0 8px 32px rgba(201, 169, 97, 0.15);
    --shadow-illumination: 0 0 30px rgba(201, 169, 97, 0.2);
    --shadow-calligraphy: 0 2px 8px rgba(28, 28, 28, 0.15);
    --shadow-ornamental: 0 4px 20px rgba(138, 90, 68, 0.15);
    
    /* === Z-Index Scale (Aligned with styles.css) === */
    --z-auto: auto;
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-modal: 1000;
    --z-dropdown: 1100;
    --z-popover: 1200;
    --z-tooltip: 1300;
    --z-notification: 1400;
    --z-max: 9999;
    
    /* === Enhanced Animation System === */
    /* Timing functions for manuscript aesthetics */
    --ease-manuscript: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-illumination: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-calligraphy: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-ornamental: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Duration scales */
    --duration-instant: 0ms;
    --duration-fast: 150ms;
    --duration-base: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 700ms;
    --duration-slowest: 1000ms;
    
    /* Manuscript-inspired durations */
    --duration-illumination: 600ms;
    --duration-calligraphy: 800ms;
    --duration-ornamental: 1200ms;
    
    /* === Enhanced Transition System === */
    --transition-all: all var(--duration-base) var(--ease-manuscript);
    --transition-colors: background-color var(--duration-base) var(--ease-manuscript), 
                        border-color var(--duration-base) var(--ease-manuscript), 
                        color var(--duration-base) var(--ease-manuscript);
    --transition-transform: transform var(--duration-base) var(--ease-manuscript);
    --transition-opacity: opacity var(--duration-base) var(--ease-manuscript);
    --transition-shadow: box-shadow var(--duration-base) var(--ease-manuscript);
    
    /* Manuscript-specific transitions */
    --transition-illumination: all var(--duration-illumination) var(--ease-illumination);
    --transition-calligraphy: all var(--duration-calligraphy) var(--ease-calligraphy);
    --transition-ornamental: all var(--duration-ornamental) var(--ease-ornamental);
    
    /* === Container System === */
    --container-xs: 20rem;            /* 320px */
    --container-sm: 24rem;            /* 384px */
    --container-md: 28rem;            /* 448px */
    --container-lg: 32rem;            /* 512px */
    --container-xl: 36rem;            /* 576px */
    --container-2xl: 42rem;           /* 672px */
    --container-3xl: 48rem;           /* 768px */
    --container-4xl: 56rem;           /* 896px */
    --container-5xl: 64rem;           /* 1024px */
    --container-6xl: 72rem;           /* 1152px */
    --container-7xl: 80rem;           /* 1280px */
    --container-full: 100%;
    
    /* === Manuscript Grid System === */
    --grid-manuscript-columns: 12;
    --grid-manuscript-gap: var(--space-6);
    --grid-manuscript-margin: var(--space-8);
}

/* ===== ENHANCED GLOBAL RESET & BASE STYLES ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Enhanced Arabic text rendering */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    line-height: var(--leading-normal);
    color: var(--neutral-900);
    background-color: var(--neutral-50);
    direction: rtl;
    text-align: right;
    /* Enhanced Arabic rendering */
    font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
    font-variant-ligatures: common-ligatures contextual;
    letter-spacing: var(--tracking-arabic);
    word-spacing: var(--word-spacing-arabic);
}

/* ===== SOPHISTICATED TYPOGRAPHY SYSTEM ===== */

/* Enhanced heading hierarchy with Arabic consideration */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--neutral-900);
    margin-bottom: var(--space-4);
    /* Arabic-specific enhancements */
    font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
    letter-spacing: var(--tracking-arabic);
    transition: var(--transition-colors);
}

h1 { 
    font-size: var(--text-5xl); 
    font-family: var(--font-display);
    line-height: var(--leading-none);
    margin-bottom: var(--space-6);
}

h2 { 
    font-size: var(--text-4xl); 
    line-height: var(--leading-tight);
    margin-bottom: var(--space-5);
}

h3 { 
    font-size: var(--text-3xl); 
    margin-bottom: var(--space-4);
}

h4 { 
    font-size: var(--text-2xl); 
    margin-bottom: var(--space-4);
}

h5 { 
    font-size: var(--text-xl); 
    margin-bottom: var(--space-3);
}

h6 { 
    font-size: var(--text-lg); 
    margin-bottom: var(--space-3);
}

/* Enhanced paragraph styling */
p {
    margin-bottom: var(--space-4);
    line-height: var(--leading-relaxed);
    color: var(--neutral-800);
}

/* Sophisticated link styling */
a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: var(--transition-colors);
    border-bottom: 1px solid transparent;
}

a:hover {
    color: var(--accent-dark);
    border-bottom-color: currentColor;
}

a:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Enhanced list styling */
ul, ol {
    margin-bottom: var(--space-4);
    padding-right: var(--space-6);
}

li {
    margin-bottom: var(--space-2);
    line-height: var(--leading-relaxed);
}

/* ===== SOPHISTICATED COMPONENT LIBRARY ===== */

/* Enhanced Button System */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition-all);
    white-space: nowrap;
    user-select: none;
    position: relative;
    overflow: hidden;
    /* Arabic text optimization */
    font-feature-settings: "liga" 1, "kern" 1;
}

.btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Manuscript-inspired button effect */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform var(--duration-slow) var(--ease-manuscript);
}

.btn:hover::before {
    transform: translateX(100%);
}

/* Button Variants */
.btn-primary {
    background-color: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-base);
}

.btn-primary:hover {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background-color: transparent;
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.btn-secondary:hover {
    background-color: var(--accent-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-manuscript {
    background: linear-gradient(135deg, var(--manuscript-gold) 0%, var(--geometric-copper) 100%);
    color: var(--calligraphy-black);
    border: none;
    box-shadow: var(--shadow-manuscript);
    font-family: var(--font-manuscript);
    font-weight: var(--font-semibold);
}

.btn-manuscript:hover {
    background: linear-gradient(135deg, var(--geometric-copper) 0%, var(--manuscript-gold) 100%);
    transform: translateY(-3px);
    box-shadow: var(--shadow-illumination);
}

.btn-calligraphy {
    background: linear-gradient(135deg, var(--parchment-cream) 0%, var(--papyrus-beige) 100%);
    color: var(--calligraphy-black);
    border: 2px solid var(--manuscript-gold);
    font-family: var(--font-calligraphy);
    font-weight: var(--font-medium);
    position: relative;
}

.btn-calligraphy::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--manuscript-gold), var(--geometric-copper), var(--manuscript-gold));
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-manuscript);
}

.btn-calligraphy:hover::after {
    opacity: 1;
}

/* Button Sizes */
.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
}

.btn-xl {
    padding: var(--space-5) var(--space-10);
    font-size: var(--text-xl);
}

/* ===== SOPHISTICATED FORM SYSTEM ===== */

.form-group {
    margin-bottom: var(--space-6);
    position: relative;
}

.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: var(--font-medium);
    color: var(--neutral-700);
    font-family: var(--font-body);
    font-feature-settings: "liga" 1, "kern" 1;
}

.form-control {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--neutral-900);
    background-color: white;
    border: 2px solid var(--neutral-300);
    border-radius: var(--radius-lg);
    transition: var(--transition-all);
    /* Arabic text optimization */
    direction: rtl;
    text-align: right;
    font-feature-settings: "liga" 1, "kern" 1;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(138, 90, 68, 0.1);
    background-color: var(--parchment-cream);
}

.form-control::placeholder {
    color: var(--neutral-500);
    opacity: 1;
    font-style: italic;
}

/* Manuscript-inspired form control */
.form-control-manuscript {
    background: linear-gradient(135deg, var(--parchment-cream) 0%, white 100%);
    border: 2px solid var(--manuscript-gold);
    font-family: var(--font-manuscript);
    box-shadow: var(--shadow-calligraphy);
}

.form-control-manuscript:focus {
    border-color: var(--geometric-copper);
    box-shadow: var(--shadow-illumination);
    background: var(--parchment-cream);
}

/* ===== SCHOLARLY-SPECIFIC COMPONENTS ===== */

/* Manuscript Card Component */
.manuscript-card {
    background: linear-gradient(135deg, var(--parchment-cream) 0%, white 100%);
    border: 1px solid var(--manuscript-gold);
    border-radius: var(--radius-manuscript);
    padding: var(--space-6);
    box-shadow: var(--shadow-manuscript);
    position: relative;
    overflow: hidden;
    transition: var(--transition-all);
}

.manuscript-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--manuscript-gold) 0%, var(--geometric-copper) 50%, var(--manuscript-gold) 100%);
}

.manuscript-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-illumination);
    border-color: var(--geometric-copper);
}

/* Quranic Verse Container */
.verse-container {
    background: radial-gradient(circle at center, var(--parchment-cream) 0%, var(--papyrus-beige) 100%);
    border: 2px solid var(--manuscript-gold);
    border-radius: var(--radius-ornamental);
    padding: var(--space-8);
    margin: var(--space-8) 0;
    text-align: center;
    position: relative;
    box-shadow: var(--shadow-illumination);
}

.verse-container::before,
.verse-container::after {
    content: '◈';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--text-2xl);
    color: var(--manuscript-gold);
    font-family: var(--font-display);
}

.verse-container::before {
    right: var(--space-4);
}

.verse-container::after {
    left: var(--space-4);
}

.verse-text {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--leading-arabic);
    color: var(--calligraphy-black);
    margin-bottom: var(--space-4);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wide);
}

.verse-reference {
    font-family: var(--font-manuscript);
    font-size: var(--text-sm);
    color: var(--manuscript-blue);
    font-style: italic;
    font-weight: var(--font-medium);
}

/* Arabic Poetry Block */
.poetry-block {
    background: linear-gradient(135deg, var(--papyrus-beige) 0%, var(--parchment-cream) 100%);
    border-right: 4px solid var(--manuscript-gold);
    border-radius: 0 var(--radius-manuscript) var(--radius-manuscript) 0;
    padding: var(--space-6) var(--space-8);
    margin: var(--space-6) 0;
    font-family: var(--font-poetry);
    font-size: var(--text-lg);
    line-height: var(--leading-arabic);
    text-align: center;
    color: var(--calligraphy-black);
    box-shadow: var(--shadow-calligraphy);
    position: relative;
}

.poetry-block::before {
    content: '"';
    position: absolute;
    top: -var(--space-2);
    right: -var(--space-2);
    font-size: var(--text-6xl);
    color: var(--manuscript-gold);
    opacity: 0.3;
    font-family: var(--font-display);
    line-height: 1;
}

.poetry-verse {
    margin-bottom: var(--space-3);
    font-weight: var(--font-medium);
}

.poetry-verse:last-child {
    margin-bottom: 0;
}

/* Academic Citation Component */
.citation-reference {
    display: inline-block;
    background: var(--manuscript-gold);
    color: white;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-base);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: var(--transition-all);
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.citation-reference:hover {
    background: var(--geometric-copper);
    transform: translateY(-1px);
    box-shadow: var(--shadow-base);
}

.citation-reference::before {
    content: '[' attr(data-ref) ']';
}

/* Illuminated Initial Letter */
.illuminated-initial {
    float: right;
    font-family: var(--font-display);
    font-size: var(--text-8xl);
    line-height: 0.8;
    padding: var(--space-2);
    margin: 0 0 var(--space-4) var(--space-4);
    background: linear-gradient(135deg, var(--manuscript-gold) 0%, var(--geometric-copper) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--manuscript-gold);
    font-weight: var(--font-bold);
    text-shadow: var(--shadow-calligraphy);
    position: relative;
}

.illuminated-initial::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, var(--manuscript-gold) 0%, transparent 70%);
    opacity: 0.1;
    border-radius: var(--radius-base);
    z-index: -1;
}

/* ===== ENHANCED CARD SYSTEM ===== */

.card {
    background-color: white;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-all);
    overflow: hidden;
    position: relative;
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: var(--accent-primary);
}

.card-manuscript {
    background: linear-gradient(135deg, var(--parchment-cream) 0%, white 100%);
    border: 2px solid var(--manuscript-gold);
    box-shadow: var(--shadow-manuscript);
}

.card-manuscript:hover {
    box-shadow: var(--shadow-illumination);
    transform: translateY(-4px);
}

.card-header {
    padding: var(--space-4) var(--space-6);
    background: linear-gradient(135deg, var(--neutral-50) 0%, var(--warm-neutral-50) 100%);
    border-bottom: 1px solid var(--neutral-200);
    font-family: var(--font-heading);
}

.card-body {
    padding: var(--space-6);
}

.card-footer {
    padding: var(--space-4) var(--space-6);
    background: linear-gradient(135deg, var(--warm-neutral-50) 0%, var(--neutral-50) 100%);
    border-top: 1px solid var(--neutral-200);
}

/* ===== SOPHISTICATED BADGE SYSTEM ===== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: 1;
    border-radius: var(--radius-full);
    white-space: nowrap;
    font-family: var(--font-body);
}

.badge-primary {
    background-color: var(--accent-primary);
    color: white;
}

.badge-manuscript {
    background: linear-gradient(135deg, var(--manuscript-gold) 0%, var(--geometric-copper) 100%);
    color: white;
    font-family: var(--font-manuscript);
    font-weight: var(--font-semibold);
}

.badge-calligraphy {
    background: var(--parchment-cream);
    color: var(--calligraphy-black);
    border: 1px solid var(--manuscript-gold);
    font-family: var(--font-calligraphy);
}

/* ===== ENHANCED ALERT SYSTEM ===== */

.alert {
    padding: var(--space-4) var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-family: var(--font-body);
    position: relative;
    overflow: hidden;
}

.alert::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: currentColor;
}

.alert-icon {
    flex-shrink: 0;
    font-size: var(--text-xl);
    margin-top: var(--space-1);
}

.alert-content {
    flex: 1;
    line-height: var(--leading-relaxed);
}

.alert-success {
    background: var(--success-bg);
    color: var(--success-dark);
    border-color: var(--success-color);
}

.alert-manuscript {
    background: linear-gradient(135deg, var(--parchment-cream) 0%, var(--papyrus-beige) 100%);
    color: var(--calligraphy-black);
    border: 2px solid var(--manuscript-gold);
    font-family: var(--font-manuscript);
}

/* ===== ARABIC TYPOGRAPHY SPECIALIZATIONS ===== */

/* Quranic text styling */
.text-quranic {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--leading-arabic);
    font-weight: var(--font-medium);
    color: var(--calligraphy-black);
    text-align: center;
    letter-spacing: var(--tracking-wide);
    word-spacing: var(--word-spacing-arabic);
}

/* Calligraphic text styling */
.text-calligraphy {
    font-family: var(--font-calligraphy);
    font-weight: var(--font-medium);
    color: var(--calligraphy-black);
    letter-spacing: var(--tracking-arabic);
    word-spacing: var(--word-spacing-arabic);
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
}

/* Poetry text styling */
.text-poetry {
    font-family: var(--font-poetry);
    font-size: var(--text-lg);
    line-height: var(--leading-arabic);
    text-align: center;
    color: var(--calligraphy-black);
    font-weight: var(--font-regular);
    font-style: normal;
}

/* Manuscript text styling */
.text-manuscript {
    font-family: var(--font-manuscript);
    color: var(--ink-brown);
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-arabic);
}

/* ===== UTILITY CLASSES (Enhanced) ===== */

/* Text Alignment */
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }

/* Font Weights */
.font-thin { font-weight: var(--font-thin); }
.font-extralight { font-weight: var(--font-extralight); }
.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); }
.font-black { font-weight: var(--font-black); }

/* Font Families */
.font-display { font-family: var(--font-display); }
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }
.font-manuscript { font-family: var(--font-manuscript); }
.font-calligraphy { font-family: var(--font-calligraphy); }
.font-poetry { font-family: var(--font-poetry); }
.font-mono { font-family: var(--font-mono); }

/* Text Colors */
.text-primary { color: var(--accent-primary); }
.text-manuscript-gold { color: var(--manuscript-gold); }
.text-manuscript-blue { color: var(--manuscript-blue); }
.text-calligraphy { color: var(--calligraphy-black); }
.text-ink { color: var(--ink-brown); }

/* Background Colors */
.bg-parchment { background-color: var(--parchment-cream); }
.bg-papyrus { background-color: var(--papyrus-beige); }
.bg-manuscript { background: linear-gradient(135deg, var(--parchment-cream) 0%, var(--papyrus-beige) 100%); }

/* Spacing Utilities (Enhanced) */
.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.m-10 { margin: var(--space-10); }
.m-12 { margin: var(--space-12); }

.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }

/* Display Utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }

/* Flexbox Utilities */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-center { align-items: center; }
.align-baseline { align-items: baseline; }
.align-stretch { align-items: stretch; }

/* Gap Utilities */
.gap-0 { gap: var(--space-0); }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Border Utilities */
.border { border: 1px solid var(--neutral-300); }
.border-manuscript { border: 2px solid var(--manuscript-gold); }
.border-0 { border: 0; }

/* Border Radius */
.rounded { border-radius: var(--radius-base); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }
.rounded-manuscript { border-radius: var(--radius-manuscript); }
.rounded-ornamental { border-radius: var(--radius-ornamental); }

/* Shadow Utilities */
.shadow-none { box-shadow: var(--shadow-none); }
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-base); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-manuscript { box-shadow: var(--shadow-manuscript); }
.shadow-illumination { box-shadow: var(--shadow-illumination); }
.shadow-calligraphy { box-shadow: var(--shadow-calligraphy); }

/* ===== RESPONSIVE DESIGN SYSTEM ===== */

@media (max-width: 768px) {
    :root {
        --text-base: 0.875rem;
        --text-lg: 1rem;
        --text-xl: 1.125rem;
        --text-2xl: 1.25rem;
        --text-3xl: 1.5rem;
        --text-4xl: 1.875rem;
        --text-5xl: 2.25rem;
    }
    
    body {
        font-size: var(--text-base);
    }
    
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }
    h4 { font-size: var(--text-lg); }
    h5 { font-size: var(--text-base); }
    h6 { font-size: var(--text-sm); }
    
    .container {
        padding: var(--space-4);
    }
    
    .btn {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
    }
    
    .card-body {
        padding: var(--space-4);
    }
    
    .verse-container {
        padding: var(--space-4);
        margin: var(--space-4) 0;
    }
    
    .poetry-block {
        padding: var(--space-4);
        margin: var(--space-4) 0;
    }
    
    .illuminated-initial {
        font-size: var(--text-5xl);
        margin-bottom: var(--space-2);
    }
}

/* ===== DARK MODE SUPPORT ===== */

@media (prefers-color-scheme: dark) {
    :root {
        --neutral-50: #1a1a1a;
        --neutral-100: #2a2a2a;
        --neutral-200: #3a3a3a;
        --neutral-300: #4a4a4a;
        --neutral-800: #e0e0e0;
        --neutral-900: #fafafa;
        
        --parchment-cream: #2d2520;
        --papyrus-beige: #3a322b;
        --calligraphy-black: #e0e0e0;
        --ink-brown: #c8b6a6;
        
        --manuscript-gold: #c9a961;
        --manuscript-blue: #5a8ac7;
        --manuscript-green: #5a9667;
    }
    
    body {
        background-color: var(--neutral-50);
        color: var(--neutral-900);
    }
    
    .card,
    .manuscript-card {
        background-color: var(--neutral-100);
        border-color: var(--neutral-200);
    }
    
    .form-control {
        background-color: var(--neutral-100);
        border-color: var(--neutral-300);
        color: var(--neutral-900);
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    :root {
        --text-base: 12pt;
        --text-lg: 14pt;
        --text-xl: 16pt;
        --text-2xl: 18pt;
        --text-3xl: 24pt;
        --text-4xl: 28pt;
        --text-5xl: 32pt;
    }
    
    body {
        font-size: var(--text-base);
        line-height: 1.5;
        color: black;
        background: white;
    }
    
    .no-print,
    .btn,
    .alert {
        display: none !important;
    }
    
    .manuscript-card,
    .verse-container,
    .poetry-block {
        background: white !important;
        border: 1pt solid #666 !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }
    
    .illuminated-initial {
        color: #666 !important;
        background: none !important;
        -webkit-text-fill-color: #666 !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        color: black !important;
    }
    
    .verse-text,
    .poetry-verse {
        color: black !important;
    }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.focus-visible:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --neutral-300: #000;
        --neutral-700: #000;
        --manuscript-gold: #b8860b;
        --accent-primary: #6b4423;
    }
    
    .btn,
    .form-control,
    .card {
        border-width: 3px;
    }
    
    .manuscript-card {
        border-width: 4px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== ANIMATION ENHANCEMENTS ===== */

.transition-all { transition: var(--transition-all); }
.transition-colors { transition: var(--transition-colors); }
.transition-transform { transition: var(--transition-transform); }
.transition-opacity { transition: var(--transition-opacity); }
.transition-shadow { transition: var(--transition-shadow); }
.transition-illumination { transition: var(--transition-illumination); }
.transition-calligraphy { transition: var(--transition-calligraphy); }
.transition-ornamental { transition: var(--transition-ornamental); }

.hover-scale:hover { transform: scale(1.05); }
.hover-lift:hover { transform: translateY(-2px); }
.hover-glow:hover { box-shadow: var(--shadow-illumination); }
.hover-illuminate:hover { 
    background: linear-gradient(135deg, var(--parchment-cream) 0%, var(--manuscript-gold) 100%);
    color: var(--calligraphy-black);
}

/* ===== MANUSCRIPT-INSPIRED KEYFRAMES ===== */

@keyframes illuminateText {
    0% { 
        text-shadow: none;
        opacity: 0.8;
    }
    50% {
        text-shadow: 0 0 10px var(--manuscript-gold);
        opacity: 1;
    }
    100% { 
        text-shadow: 0 0 20px var(--manuscript-gold);
        opacity: 1;
    }
}

@keyframes manuscriptReveal {
    0% { 
        opacity: 0; 
        transform: translateY(20px) scale(0.95);
        filter: blur(2px);
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes ornamentalFloat {
    0%, 100% { 
        transform: translateY(0) rotate(0deg);
    }
    50% { 
        transform: translateY(-5px) rotate(2deg);
    }
}

@keyframes calligraphyFlow {
    0% { 
        opacity: 0;
        transform: translateX(20px);
    }
    50% {
        opacity: 0.7;
        transform: translateX(-5px);
    }
    100% { 
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animation Utility Classes */
.animate-illuminate { animation: illuminateText var(--duration-illumination) var(--ease-illumination) infinite; }
.animate-reveal { animation: manuscriptReveal var(--duration-base) var(--ease-manuscript); }
.animate-float { animation: ornamentalFloat 3s var(--ease-manuscript) infinite; }
.animate-flow { animation: calligraphyFlow var(--duration-calligraphy) var(--ease-calligraphy); }

/* ===== PLATFORM INTEGRATION UTILITIES ===== */

/* Ensures compatibility with styles.css foundation */
.foundation-compatible {
    /* Inherits foundation variables while adding enhancements */
    color: var(--text-color, var(--neutral-900));
    background-color: var(--background-color, var(--neutral-50));
    font-family: var(--font-body, 'Tajawal', sans-serif);
}

/* Enhanced component that respects platform hierarchy */
.platform-enhanced {
    /* Uses design system tokens with foundation fallbacks */
    border-radius: var(--radius-lg, 0.5rem);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.1));
    transition: var(--transition-all, all 0.3s ease);
}

/* Scholarly enhancement that builds on foundation */
.scholarly-enhanced {
    /* Manuscript aesthetics with platform integration */
    background: linear-gradient(135deg, 
                var(--parchment-cream, #fbf8f1) 0%, 
                var(--card-background, white) 100%);
    border: 2px solid var(--accent-color, var(--manuscript-gold));
    font-family: var(--font-manuscript, var(--font-body));
}