/* ==========================================================================
   📰 FIMED - DESIGN TOKENS
   المتغيرات والألوان الأساسية
   ========================================================================== */

:root {
    /* ========================================
       🎨 BRAND COLORS
       ======================================== */

    --color-primary: #B71C1C;
    --color-primary-rgb: 183, 28, 28;
    --color-primary-dark: #7F0000;
    --color-primary-light: #E53935;

    --color-accent: #1B5E20;
    --color-accent-light: #2E7D32;

    --color-gold: #C9A84C;
    --color-quds: #1B5E20;
    --color-quds-light: #2E7D32;

    /* ========================================
       🎨 NEUTRAL COLORS
       ======================================== */

    --color-ink: #1A1A1A;
    --color-ink-soft: #3D3D3D;
    --color-ink-muted: #6B6B6B;

    --color-surface: #FFFFFF;
    --color-surface-warm: #FAFAF7;
    --color-surface-alt: #F5F4F0;
    --color-surface-dark: #111111;

    --color-border: #E0E0E0;
    --color-border-light: #F0F0F0;

    /* ========================================
       🔤 TYPOGRAPHY
       ======================================== */

    --font-display: 'Cairo', sans-serif;
    --font-body: 'Cairo', sans-serif;
    --font-serif: 'Cairo', serif;

    /* ========================================
       📏 SPACING
       ======================================== */

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;

    /* ========================================
       📐 LAYOUT
       ======================================== */

    --max-width: 1320px;

    /* ========================================
       🔲 BORDERS & RADIUS
       ======================================== */

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* ========================================
       🌫️ SHADOWS
       ======================================== */

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
}