/* =========================================
   الهوية البصرية العامة لموقع حسين الخليل
   ========================================= */

:root {
    /* الألوان الأساسية */
    --primary-color: #5c4a24;
    --intellectual-brown: #5c4a24;
    --accent-gold: #d4af37;

    /* الخلفيات */
    --bg-color: #f9f7f2;
    --ticker-footer-bg: #f1e4c0;
    --surface-color: #ffffff;

    /* ألوان النصوص */
    --text-primary: #1e293b;
    --text-secondary: #64748b;

    /* الظلال */
    --shadow-sm: 0 4px 15px rgba(92, 74, 36, 0.08);
    --shadow-md: 0 8px 20px rgba(92, 74, 36, 0.12);
    --shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.1);

    /* الحواف */
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;

    /* ارتفاع شريط الأخبار */
    --ticker-height: 55px;
}


/* =========================================
   الإعدادات العامة
   ========================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Tajawal', Arial, sans-serif;
}

body.no-scroll {
    overflow: hidden;
}

a {
    text-decoration: none;
}


/* =========================================
   ألوان مساعدة عامة
   ========================================= */

.primary-color {
    color: var(--primary-color);
}

.intellectual-brown {
    color: var(--intellectual-brown);
}

.accent-gold {
    color: var(--accent-gold);
}

.bg-primary {
    background-color: var(--primary-color);
}

.bg-gold {
    background-color: var(--accent-gold);
}

.bg-site {
    background-color: var(--bg-color);
}

.bg-surface {
    background-color: var(--surface-color);
}


/* =========================================
   الظلال العامة
   ========================================= */

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}


/* =========================================
   الحواف العامة
   ========================================= */

.radius-lg {
    border-radius: var(--radius-lg);
}

.radius-xl {
    border-radius: var(--radius-xl);
}