/* variables.css - 特斯拉/苹果风格配色系统 */

:root {
  /* ========== 主色调 ========== */
  /* 背景色 - 苹果风格：纯白和浅灰 */
  --color-bg-primary: #FFFFFF;           /* 纯白背景 */
  --color-bg-secondary: #F5F5F7;         /* 苹果浅灰背景 */
  --color-bg-tertiary: #FAFAFA;          /* 更浅的灰背景 */
  --color-bg-dark: #1D1D1F;              /* 深色背景（苹果深灰） */
  --color-bg-overlay: rgba(0, 0, 0, 0.4); /* 遮罩层 */
  
  /* 文字颜色 - 苹果风格：柔和的灰色层次 */
  --color-text-primary: #1D1D1F;          /* 主要文字（深灰） */
  --color-text-secondary: #6E6E73;        /* 次要文字（中灰） */
  --color-text-tertiary: #86868B;         /* 辅助文字（浅灰） */
  --color-text-light: #FFFFFF;           /* 白色文字（用于深色背景） */
  --color-text-accent: #007AFF;           /* 强调色（苹果蓝，可选） */
  
  /* 品牌色 - 保持金色但更柔和 */
  --color-brand-primary: #FFD700;         /* 品牌金色 */
  --color-brand-secondary: #F5C842;        /* 柔和的金色变体 */
  --color-brand-accent: rgba(255, 215, 0, 0.1); /* 金色半透明 */
  
  /* ========== 边框和分割线 ========== */
  --color-border-light: rgba(0, 0, 0, 0.08);    /* 非常浅的边框 */
  --color-border-medium: rgba(0, 0, 0, 0.12);   /* 中等边框 */
  --color-border-dark: rgba(0, 0, 0, 0.2);       /* 深色边框 */
  
  /* ========== 阴影 ========== */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);           /* 小阴影 */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);         /* 中等阴影 */
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);         /* 大阴影 */
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.15);        /* 超大阴影 */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);        /* 卡片阴影 */
  --shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.1);       /* 悬停阴影 */
  
  /* ========== 渐变 ========== */
  --gradient-overlay: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.5));
  
  /* ========== 过渡动画 ========== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* ========== 圆角 ========== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 50%;
  
  /* ========== 字体大小 ========== */
  --font-size-h1: 3.5rem;
  --font-size-h2: 2.5rem;
  --font-size-h3: 1.5rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  
  /* ========== 容器最大宽度 ========== */
  --container-max-width: 1400px;
  --container-padding: 60px;
}

/* 深色模式支持（可选，未来扩展） */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: #1D1D1F;
    --color-bg-secondary: #2C2C2E;
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #AEAEB2;
  }
}