/* 
 * Yemen Union Website Variables CSS
 * Contains global CSS variables for consistent styling across the site
 */

:root {
  /* Primary Colors */
  --primary-color: #0056b3;
  --secondary-color: #003d7a;
  --accent-color: #e63946;
  
  /* Neutral Colors */
  --text-color: #333333;
  --light-text: #6c757d;
  --background-color: #ffffff;
  --light-background: #f8f9fa;
  --border-color: #dee2e6;
  
  /* Semantic Colors */
  --success-color: #28a745;
  --info-color: #17a2b8;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
  
  /* Typography */
  --font-family-primary: 'Cairo', sans-serif;
  --font-family-secondary: 'Arial', sans-serif;
  --font-size-base: 16px;
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.5rem;
  --font-size-xxlarge: 2rem;
  --font-weight-normal: 400;
  --font-weight-bold: 600;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  
  /* Borders */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 1rem;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Z-index layers */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
}

/* Dark mode variables - will be applied when .dark-mode class is added to body */
.dark-mode {
  --text-color: #f8f9fa;
  --light-text: #adb5bd;
  --background-color: #121212;
  --light-background: #1e1e1e;
  --border-color: #343a40;
}

/* RTL specific variables */
[dir="rtl"] {
  --text-align-default: right;
  --float-default: right;
  --float-opposite: left;
}

/* LTR specific variables */
[dir="ltr"] {
  --text-align-default: left;
  --float-default: left;
  --float-opposite: right;
}