/* ============================================
   CSS 变量定义 - 设计系统基础
   基于 DESIGN_SPEC.md 规范
   ============================================ */

:root {
  /* 品牌主色 */
  --color-primary: #4CAF50;
  --color-primary-dark: #388E3C;
  --color-primary-light: #C8E6C9;
  --color-primary-bg: #E8F5E9;

  /* 功能色 */
  --color-success: #4CAF50;
  --color-warning: #FF9800;
  --color-error: #F44336;
  --color-info: #2196F3;

  /* 中性色 */
  --color-text-primary: #333333;
  --color-text-secondary: #666666;
  --color-text-hint: #999999;
  --color-text-disabled: #CCCCCC;
  --color-border: #E0E0E0;
  --color-divider: #F5F5F5;
  --color-bg-page: #F5F5F5;
  --color-bg-card: #FFFFFF;

  /* 字体族 */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', Arial, sans-serif;

  /* 字号 */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-xxl: 24px;

  /* 行高 */
  --line-height-base: 1.5;

  /* 间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 50%;

  /* 阴影 */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.16);
  --shadow-top: 0 -2px 8px rgba(0, 0, 0, 0.08);

  /* 布局尺寸 */
  --nav-height: 44px;
  --tab-bar-height: 50px;
  --cart-bar-height: 50px;
  --category-width: 80px;

  /* 过渡动画 */
  --transition-fast: 0.1s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}