/* CSS Variables - Design System */
:root {
  /* Primary Colors - Blue Theme */
  --primary-blue: #1890ff;
  --primary-blue-light: #40a9ff;
  --primary-blue-dark: #096dd9;
  --primary-blue-pale: #e6f7ff;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  --gradient-light: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);

  /* Semantic Colors */
  --success: #52c41a;
  --warning: #faad14;
  --error: #f5222d;
  --info: #13c2c2;

  /* Neutral Colors */
  --gray-1: #ffffff;
  --gray-2: #fafafa;
  --gray-3: #f5f5f5;
  --gray-4: #e8e8e8;
  --gray-5: #d9d9d9;
  --gray-6: #bfbfbf;
  --gray-7: #8c8c8c;
  --gray-8: #595959;
  --gray-9: #262626;
  --gray-10: #000000;

  /* Sidebar */
  --sidebar-bg: #f5f7fa;
  --sidebar-text: rgba(0, 0, 0, 0.65);
  --sidebar-text-active: #ffffff;
  --sidebar-item-hover: rgba(255, 255, 255, 0.08);
  --sidebar-item-active: #ffffff;

  /* Font Sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.2);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Z-index */
  --z-sidebar: 100;
  --z-header: 90;
  --z-modal: 1000;
  --z-toast: 2000;

  /* Layout */
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 64px;
  --header-height: 64px;
}