:root {
    /* Colors */
    --color-primary: #0F172A; /* Navy Blue */
    --color-secondary: #3B82F6; /* Vibrant Blue */
    --color-accent: #2563EB; /* Darker Blue for hover */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-white: #ffffff;
    --color-light-gray: #F8FAFC;
    --color-text-main: #1E293B;
    --color-text-muted: #64748B;
    --color-border: #E2E8F0;

    /* Fonts */
    --font-en: 'Inter', system-ui, -apple-system, sans-serif;
    --font-ar: 'Cairo', system-ui, -apple-system, sans-serif;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Transitions */
    --transition-base: all 0.3s ease;
}

[lang="ar"] {
    --font-family-base: var(--font-ar);
    direction: rtl;
}

[lang="en"] {
    --font-family-base: var(--font-en);
    direction: ltr;
}

body {
    font-family: var(--font-family-base);
    color: var(--color-text-main);
    background-color: var(--color-white);
    line-height: 1.6;
}