:root {
    /* =========================================
       DESIGN SYSTEM: Clean & Professional (Apple/Zara)
       ========================================= */

    /* --- Primary Palette --- */
    --color-primary: #1D1D1F;
    /* Rich Black - For text and accents */
    --color-primary-hover: #000000;

    --color-accent: #0071E3;
    /* Apple Blue - CTAs */
    --color-accent-hover: #0077ED;

    /* --- Backgrounds --- */
    --color-background: #FFFFFF;
    /* Pure White */
    --color-surface: #F5F5F7;
    /* Soft Grey - Section backgrounds */
    --color-surface-alt: #FBFBFD;
    /* Off-white for cards */

    /* --- Text --- */
    --color-text-main: #1D1D1F;
    /* Primary text */
    --color-text-secondary: #424245;
    /* Body text */
    --color-text-muted: #86868B;
    /* Captions, meta */
    --color-text-inverse: #FFFFFF;
    /* On dark backgrounds */

    /* --- Borders & Dividers --- */
    --color-border: #D2D2D7;
    --color-border-light: #E8E8ED;
    --color-divider: #F5F5F7;

    /* --- Typography --- */
    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');
    --font-primary: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;

    /* --- Spacing (8pt Grid) --- */
    --spacing-xs: 0.5rem;
    /* 8px */
    --spacing-sm: 1rem;
    /* 16px */
    --spacing-md: 1.5rem;
    /* 24px */
    --spacing-lg: 3rem;
    /* 48px */
    --spacing-xl: 5rem;
    /* 80px */
    --spacing-2xl: 8rem;
    /* 128px */

    /* --- Border Radius (Refined) --- */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 9999px;

    /* --- Shadows (Subtle & Natural) --- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);

    /* --- Transitions --- */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-smooth: 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}