/* 
 * Variables CSS
 * Chứa các biến màu sắc, kích thước, và các giá trị cơ bản dùng trong toàn bộ hệ thống
 */

:root {
  /* Colors */
  --primary-color: #2271b1;
  --secondary-color: #135e96;
  --success-color: #46b450;
  --info-color: #00a0d2;
  --warning-color: #ffb900;
  --danger-color: #dc3232;
  --light-color: #f0f0f1;
  --dark-color: #1d2327;
  --gray-color: #646970;
  --gray-light: #f0f0f0;
  --gray-dark: #2c3338;
  --sync-notice-bg: #565c70;
  
  /* Typography */
  --base-font-size: 13px;
  --heading-font-size: 1.3em;
  --subheading-font-size: 1.1em;
  --small-font-size: 0.85em;
  
  /* Spacing */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  
  /* Border */
  --border-width: 1px;
  --border-radius: 4px;
  --border-radius-sm: 3px;
  --border-radius-lg: 8px;
  --border-color: #c3c4c7;
  
  /* Box Shadow */
  --box-shadow-light: 0 1px 1px rgba(0, 0, 0, 0.04);
  --box-shadow-medium: 0 1px 2px rgba(0, 0, 0, 0.1);
  --box-shadow-heavy: 0 3px 8px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease-in-out;
  
  /* Layout */
  --content-width: 1200px;
  --sidebar-width: 20%;
  --main-content-width: 75%;
  
  /* Z-Index Layers */
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-fixed: 300;
  --z-index-modal-backdrop: 400;
  --z-index-modal: 500;
  --z-index-popover: 600;
  --z-index-tooltip: 700;
}

/* Legacy Support για browsers που δεν υποστηρίζουν CSS Variables */
body {
  /* Colors */
  --primary-color-fallback: #2271b1;
  --secondary-color-fallback: #135e96;
  --success-color-fallback: #46b450;
  --danger-color-fallback: #dc3232;
  --light-color-fallback: #f0f0f1;
  --dark-color-fallback: #1d2327;
}