/**
 * 海外KOL合作 - 变量定义
 * 包含颜色、字体、边距等基础变量
 */

:root {
  /* 主色调 - 社交媒体色彩灵感 */
  --kol-primary: #6441a5;     /* 深紫色 - Twitch紫色灵感 */
  --kol-secondary: #1da1f2;   /* 蓝色 - Twitter蓝色灵感 */
  --kol-accent: #ff0050;      /* 亮红色 - TikTok红色灵感 */
  --kol-light: #e1e8ed;       /* 浅灰色 - 社交媒体文本背景色 */
  --kol-dark: #292f33;        /* 深灰色 - UI深色元素 */
  --kol-instagram: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); /* Instagram渐变色 */
  --kol-youtube: #ff0000;     /* YouTube红色 */
  --kol-pinterest: #e60023;   /* Pinterest红色 */
  --kol-linkedin: #0077b5;    /* LinkedIn蓝色 */
  
  /* 中性色 */
  --kol-black: #14171a;
  --kol-white: #ffffff;
  --kol-gray-100: #f5f8fa;
  --kol-gray-200: #e1e8ed;
  --kol-gray-300: #aab8c2;
  --kol-gray-400: #657786;
  --kol-gray-500: #66757f;
  --kol-gray-600: #4b5c6b;
  --kol-gray-700: #414f5a;
  --kol-gray-800: #333c43;
  --kol-gray-900: #292f33;
  
  /* 字体 */
  --kol-font-primary: 'Montserrat', 'Noto Sans SC', sans-serif;
  --kol-font-heading: 'Poppins', 'Noto Sans SC', sans-serif;
  --kol-font-code: 'Roboto Mono', monospace;
  
  /* 字体大小 */
  --kol-font-size-xs: 0.75rem;    /* 12px */
  --kol-font-size-sm: 0.875rem;   /* 14px */
  --kol-font-size-base: 1rem;     /* 16px */
  --kol-font-size-md: 1.125rem;   /* 18px */
  --kol-font-size-lg: 1.25rem;    /* 20px */
  --kol-font-size-xl: 1.5rem;     /* 24px */
  --kol-font-size-2xl: 1.875rem;  /* 30px */
  --kol-font-size-3xl: 2.25rem;   /* 36px */
  --kol-font-size-4xl: 3rem;      /* 48px */
  --kol-font-size-5xl: 3.75rem;   /* 60px */
  
  /* 间距 */
  --kol-spacing-xs: 0.25rem;      /* 4px */
  --kol-spacing-sm: 0.5rem;       /* 8px */
  --kol-spacing-md: 1rem;         /* 16px */
  --kol-spacing-lg: 1.5rem;       /* 24px */
  --kol-spacing-xl: 2rem;         /* 32px */
  --kol-spacing-2xl: 3rem;        /* 48px */
  --kol-spacing-3xl: 4rem;        /* 64px */
  --kol-spacing-4xl: 6rem;        /* 96px */
  
  /* 边框 */
  --kol-border-radius-sm: 0.25rem;  /* 4px */
  --kol-border-radius-md: 0.5rem;   /* 8px */
  --kol-border-radius-lg: 1rem;     /* 16px */
  --kol-border-radius-xl: 1.5rem;   /* 24px */
  --kol-border-radius-full: 9999px; /* 圆形 */
  
  /* 阴影 */
  --kol-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --kol-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --kol-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --kol-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --kol-shadow-accent: 0 5px 15px rgba(255, 0, 80, 0.4);
  --kol-shadow-primary: 0 5px 15px rgba(100, 65, 165, 0.4);
  --kol-shadow-secondary: 0 5px 15px rgba(29, 161, 242, 0.4);
  
  /* 过渡 */
  --kol-transition-fast: 150ms;
  --kol-transition-normal: 300ms;
  --kol-transition-slow: 500ms;
  
  /* 容器宽度 */
  --kol-container-sm: 640px;
  --kol-container-md: 768px;
  --kol-container-lg: 1024px;
  --kol-container-xl: 1280px;
  --kol-container-2xl: 1400px;
  
  /* Z-index层级 */
  --kol-z-behind: -1;
  --kol-z-normal: 1;
  --kol-z-elevated: 10;
  --kol-z-sticky: 100;
  --kol-z-modal: 1000;
  --kol-z-tooltip: 2000;
}