/**
 * Arco Design Theme Preset
 * 模仿Arco Design UI样式的自定义主题
 * 主题色：蓝色系，禁止蓝紫渐变
 */

:root {
  /* Arco Blue Color Palette - 纯蓝色系 */
  --arco-blue-50: #f0f7ff;
  --arco-blue-100: #e0efff;
  --arco-blue-200: #b8daff;
  --arco-blue-300: #8fc5ff;
  --arco-blue-400: #5aaaff;
  --arco-blue-500: #3491fa;
  --arco-blue-600: #206ef7;
  --arco-blue-700: #1356eb;
  --arco-blue-800: #1545be;
  --arco-blue-900: #173d95;
  
  /* Neutral Colors */
  --arco-gray-50: #f7f8fa;
  --arco-gray-100: #f2f3f5;
  --arco-gray-200: #e5e6eb;
  --arco-gray-300: #c9cdd4;
  --arco-gray-400: #86909c;
  --arco-gray-500: #6b7785;
  --arco-gray-600: #4e5969;
  --arco-gray-700: #272e3b;
  --arco-gray-800: #1d2129;
  --arco-gray-900: #000000;
  
  /* Semantic Colors */
  --arco-success-50: #e8ffea;
  --arco-success-100: #aff0b5;
  --arco-success-500: #00b42a;
  --arco-success-600: #009a29;
  
  --arco-warning-50: #fff7e8;
  --arco-warning-100: #ffe4ba;
  --arco-warning-500: #ff9a2e;
  --arco-warning-600: #f77234;
  
  --arco-error-50: #fff5f5;
  --arco-error-100: #ffdbdc;
  --arco-error-500: #f53f3f;
  --arco-error-600: #e02e2e;
  
  /* Light Theme Variables */
  --arco-bg: #ffffff;
  --arco-bg-secondary: #f7f8fa;
  --arco-bg-tertiary: #f2f3f5;
  --arco-bg-hover: #f2f3f5;
  
  --arco-text-primary: #1d2129;
  --arco-text-secondary: #4e5969;
  --arco-text-tertiary: #86909c;
  --arco-text-placeholder: #c9cdd4;
  
  --arco-border: #e5e6eb;
  --arco-border-secondary: #f2f3f5;
  
  --arco-primary: var(--arco-blue-500);
  --arco-primary-hover: var(--arco-blue-600);
  --arco-primary-active: var(--arco-blue-700);
  --arco-primary-light: var(--arco-blue-50);
  
  --arco-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --arco-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --arco-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  
  --arco-radius-sm: 4px;
  --arco-radius-md: 8px;
  --arco-radius-lg: 12px;
  --arco-radius-xl: 16px;
  --arco-radius-full: 9999px;
}

/* Dark Theme Variables */
.dark {
  --arco-bg: #17171a;
  --arco-bg-secondary: #232324;
  --arco-bg-tertiary: #2a2a2b;
  --arco-bg-hover: #2a2a2b;
  
  --arco-text-primary: #f2f3f5;
  --arco-text-secondary: #c9cdd4;
  --arco-text-tertiary: #86909c;
  --arco-text-placeholder: #5f5f60;
  
  --arco-border: #333335;
  --arco-border-secondary: #2a2a2b;
  
  --arco-primary: var(--arco-blue-500);
  --arco-primary-hover: var(--arco-blue-400);
  --arco-primary-active: var(--arco-blue-300);
  --arco-primary-light: rgba(52, 145, 250, 0.15);
  
  --arco-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --arco-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --arco-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Utility Classes for Theme Colors */
.bg-arco-bg { background-color: var(--arco-bg); }
.bg-arco-bg-secondary { background-color: var(--arco-bg-secondary); }
.bg-arco-bg-tertiary { background-color: var(--arco-bg-tertiary); }

.text-arco-text-primary { color: var(--arco-text-primary); }
.text-arco-text-secondary { color: var(--arco-text-secondary); }
.text-arco-text-tertiary { color: var(--arco-text-tertiary); }
.text-arco-text-placeholder { color: var(--arco-text-placeholder); }

.border-arco-border { border-color: var(--arco-border); }
.border-arco-border-secondary { border-color: var(--arco-border-secondary); }

/* Arco Blue Color Utilities */
.text-arco-blue-50 { color: var(--arco-blue-50); }
.text-arco-blue-100 { color: var(--arco-blue-100); }
.text-arco-blue-200 { color: var(--arco-blue-200); }
.text-arco-blue-300 { color: var(--arco-blue-300); }
.text-arco-blue-400 { color: var(--arco-blue-400); }
.text-arco-blue-500 { color: var(--arco-blue-500); }
.text-arco-blue-600 { color: var(--arco-blue-600); }
.text-arco-blue-700 { color: var(--arco-blue-700); }
.text-arco-blue-800 { color: var(--arco-blue-800); }
.text-arco-blue-900 { color: var(--arco-blue-900); }

.bg-arco-blue-50 { background-color: var(--arco-blue-50); }
.dark .bg-arco-blue-50 { background-color: rgba(52, 145, 250, 0.15); }
.bg-arco-blue-100 { background-color: var(--arco-blue-100); }
.bg-arco-blue-200 { background-color: var(--arco-blue-200); }
.bg-arco-blue-300 { background-color: var(--arco-blue-300); }
.bg-arco-blue-400 { background-color: var(--arco-blue-400); }
.bg-arco-blue-500 { background-color: var(--arco-blue-500); }
.bg-arco-blue-600 { background-color: var(--arco-blue-600); }
.bg-arco-blue-700 { background-color: var(--arco-blue-700); }
.bg-arco-blue-800 { background-color: var(--arco-blue-800); }
.bg-arco-blue-900 { background-color: var(--arco-blue-900); }