/* ==================== AppShare Design Tokens ==================== */
:root {
  /* ==================== 1. 色彩系统 (Color System) ==================== */
  
  /* Primary Colors - 青色主调 */
  --md-primary: #06b6d4;
  --md-primary-rgb: 6, 182, 212;
  --md-primary-dark: #0891b2;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #cffafe;
  --md-on-primary-container: #164e63;
  --primary-gradient: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  /* Secondary Colors - 蓝绿辅助 */
  --md-secondary: #14b8a6;
  --md-on-secondary: #FFFFFF;
  --md-secondary-container: #ccfbf1;
  --md-on-secondary-container: #134e4a;
  --secondary-gradient: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  /* Tertiary Colors - 蓝色强调 */
  --md-tertiary: #3b82f6;
  --md-on-tertiary: #FFFFFF;
  --md-tertiary-container: #dbeafe;
  --md-on-tertiary-container: #1e3a8a;
  /* Surface & Background - 表面色 */
  --md-surface: #ffffff;
  --md-on-surface: #1a1a1a;
  --md-surface-variant: #f8f9fa;
  --md-on-surface-variant: #5f6368;
  --md-surface-container: #f8f9fa;
  
  /* Background Layers */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #f1f3f5;
  --bg-card: #ffffff;
  /* Text Colors - 文字 */
  --text-primary: #1a1a1a;
  --text-secondary: #5f6368;
  --text-tertiary: #9aa0a6;
  /* Border - 边框 */
  --md-outline: #adb5bd;
  --md-outline-variant: #dee2e6;
  --border-color: #e9ecef;
  /* ==================== 2. 阴影系统 (Elevation) ==================== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  
  --md-elevation-level1: 0 2px 8px rgba(0, 0, 0, 0.04);
  --md-elevation-level2: 0 4px 16px rgba(0, 0, 0, 0.08);
  /* ==================== 3. 圆角系统 (Shape) ==================== */
  --md-shape-corner-extra-small: 4px;
  --md-shape-corner-small: 8px;
  --md-shape-corner-medium: 12px;
  --md-shape-corner-large: 16px;
  --md-shape-corner-extra-large: 24px;
  --md-shape-corner-full: 9999px;
  /* ==================== 4. 动画 (Motion) ==================== */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ==================== Dark Mode (深色模式) ==================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Colors */
    --md-primary: #67e8f9;      /* 更亮的青色 */
    --md-primary-dark: #0891b2;
    --md-on-primary: #083344;
    --md-primary-container: #155e75;
    /* Surfaces */
    --md-surface: #1a1c1e;
    --md-on-surface: #e2e2e6;
    --md-surface-variant: #43474e;
    
    --bg-primary: #1a1c1e;
    --bg-secondary: #1e2022;
    --bg-tertiary: #282a2c;
    --bg-card: #1e2022;
    /* Text */
    --text-primary: #e2e2e6;
    --text-secondary: #c3c6cf;
    --text-tertiary: #8d9199;
    /* Borders */
    --md-outline: #8d9199;
    --md-outline-variant: #43474e;
    --border-color: #43474e;
    /* Shadows (Darker) */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  }
}