:root {
    /* Color Palette */
    --color-bg-main: #FFFFFF;
    --color-bg-soft: #F5FAFB;
    
    --color-accent-primary: #6BC7C0;
    --color-accent-secondary: #2FA4A9;
    --color-accent-hover: #218387;
    
    --color-border: #DDEEEE;
    
    --color-text-heading: #1F2D3D;
    --color-text-body: #425466;
    --color-text-muted: #8E9BAE;

    /* Typography */
    --font-family-ar: 'Cairo', 'Tajawal', sans-serif;
    --font-family-en: 'Inter', 'Roboto', sans-serif;

    /* Layout Spacing (Logical) */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 5rem;
    
    /* Layout Variables */
    --container-max-width: 1280px;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    
    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
}

[dir="rtl"] {
    --font-family-primary: var(--font-family-ar);
}

[dir="ltr"] {
    --font-family-primary: var(--font-family-en);
}