// _variables.scss
// Color System and Typography for Arabic RTL Design

// 1. Color System
$primary:       #0d6efd;
$secondary:     #6c757d;
$success:       #198754;
$info:          #0dcaf0;
$warning:       #ffc107;
$danger:        #dc3545;
$light:         #f8f9fa;
$dark:          #212529;

// Backgrounds and Text
$body-bg:       #f4f6f9;
$body-color:    #333333;

// 2. Typography
// Using 'Tajawal' from Google Fonts for clean Arabic typography
$font-family-arabic: 'Tajawal', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

// 3. Component Variables
$border-radius: 0.5rem;
$border-radius-sm: 0.375rem;
$border-radius-lg: 0.75rem;
$box-shadow:    0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
$box-shadow-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
