/**
 * 智羽 - 羽毛球智能训练助手
 * 设计系统 - 全局颜色变量定义
 * 基于品牌色卡构建的完整设计令牌系统
 */

:root {
  /* ============================================
   * 品牌主色（Green Family）
   * ============================================ */
  
  /* Near Black - 主文本、标题 */
  --brand-near-black: #0a0f0c;
  --brand-near-black-hover: #1a1f1c;
  --brand-near-black-active: #0f1411;
  
  /* Wise Green - 主 CTA 按钮、强调状态、选中态 */
  --brand-wise-green: #9fe870;
  --brand-wise-green-hover: #8ed65e; /* 加深 10% */
  --brand-wise-green-active: #7ec44c; /* 加深 20% */
  --brand-wise-green-light: #b9f092; /* 减淡 15% - 用于背景 */
  --brand-wise-green-glow: rgba(159, 232, 112, 0.3);
  
  /* Dark Green - 深色按钮背景、重点数据、强强调元素 */
  --brand-dark-green: #163300;
  --brand-dark-green-hover: #1f4500;
  --brand-dark-green-active: #285700;
  --brand-dark-green-light: #2a4d0a;
  
  /* Mint - 卡片背景、软界面、hover/禁用状态 */
  --brand-mint: #e2f6d5;
  --brand-mint-hover: #d4eebf;
  --brand-mint-active: #c6e6a9;
  --brand-mint-light: #f0f9e7;
  
  /* ============================================
   * 语义功能色（Semantic）
   * ============================================ */
  
  /* Positive/Success - 成功状态、校验通过 */
  --semantic-positive: #054d28;
  --semantic-positive-hover: #076b37;
  --semantic-positive-active: #098946;
  --semantic-positive-light: #1a6b42;
  --semantic-positive-bg: rgba(5, 77, 40, 0.1);
  
  /* Danger/Error - 错误状态、校验失败 */
  --semantic-danger: #d03238;
  --semantic-danger-hover: #e04248;
  --semantic-danger-active: #f05258;
  --semantic-danger-light: #a02228;
  --semantic-danger-bg: rgba(208, 50, 56, 0.1);
  
  /* Warning - 警告、待处理状态 */
  --semantic-warning: #ffd11a;
  --semantic-warning-hover: #ffe04d;
  --semantic-warning-active: #ffed80;
  --semantic-warning-light: #ccb015;
  --semantic-warning-bg: rgba(255, 209, 26, 0.1);
  
  /* Orange Accent - 暖色点缀、次要强调 */
  --semantic-orange: #ffc091;
  --semantic-orange-hover: #ffd0a8;
  --semantic-orange-active: #ffe0bf;
  --semantic-orange-light: #ffa070;
  --semantic-orange-bg: rgba(255, 192, 145, 0.1);
  
  /* ============================================
   * 中性色（Neutral）
   * ============================================ */
  
  /* Warm Dark - 次要文本、辅助说明 */
  --neutral-warm-dark: #454745;
  --neutral-warm-dark-hover: #5a5c5a;
  --neutral-warm-dark-light: #3a3c3a;
  
  /* Gray - 占位文本、禁用文本 */
  --neutral-gray: #868685;
  --neutral-gray-hover: #9a9a99;
  --neutral-gray-light: #6a6a69;
  
  /* Light - 页面背景、卡片底色、分割线 */
  --neutral-light: #e8ebe6;
  --neutral-light-hover: #f0f3ee;
  --neutral-light-active: #d8dbd6;
  --neutral-light-border: #d0d4ce;
  
  /* ============================================
   * 基础色
   * ============================================ */
  --base-white: #ffffff;
  --base-black: #000000;
  
  /* ============================================
   * 文本颜色层级
   * ============================================ */
  --text-primary: var(--brand-near-black);
  --text-secondary: var(--neutral-warm-dark);
  --text-tertiary: var(--neutral-gray);
  --text-disabled: var(--neutral-gray-light);
  --text-inverse: var(--base-white);
  --text-on-accent: var(--brand-near-black); /* Wise Green 上的文本 */
  
  /* ============================================
   * 背景颜色层级
   * ============================================ */
  --bg-primary: var(--neutral-light);
  --bg-secondary: var(--base-white);
  --bg-tertiary: var(--brand-mint-light);
  --bg-card: var(--base-white);
  --bg-card-hover: var(--brand-mint);
  --bg-overlay: rgba(10, 15, 12, 0.5);
  
  /* ============================================
   * 边框颜色
   * ============================================ */
  --border-default: var(--neutral-light-border);
  --border-strong: var(--neutral-warm-dark);
  --border-light: rgba(10, 15, 12, 0.1);
  --border-focus: var(--brand-wise-green);
  --border-error: var(--semantic-danger);
  
  /* ============================================
   * 阴影
   * ============================================ */
  --shadow-sm: 0 1px 2px rgba(10, 15, 12, 0.05);
  --shadow-md: 0 4px 8px rgba(10, 15, 12, 0.08);
  --shadow-lg: 0 8px 24px rgba(10, 15, 12, 0.12);
  --shadow-xl: 0 16px 48px rgba(10, 15, 12, 0.16);
  --shadow-glow: 0 0 24px var(--brand-wise-green-glow);
  
  /* ============================================
   * 圆角
   * ============================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* ============================================
   * 间距
   * ============================================ */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  
  /* ============================================
   * 字重
   * ============================================ */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* ============================================
   * 过渡
   * ============================================ */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
 * 深色模式
 * ============================================ */
[data-theme="dark"] {
  /* 品牌主色 - 深色模式调整 */
  --brand-near-black: #f5f5f5;
  --brand-near-black-hover: #e8e8e8;
  --brand-near-black-active: #dbdbdb;
  
  --brand-wise-green: #8ed65e; /* 略暗以适应深色背景 */
  --brand-wise-green-hover: #9fe870;
  --brand-wise-green-active: #7ec44c;
  --brand-wise-green-light: rgba(142, 214, 94, 0.15);
  
  --brand-dark-green: #2a4d0a;
  --brand-dark-green-hover: #3a610e;
  --brand-dark-green-active: #4a7512;
  
  --brand-mint: #1a2a14;
  --brand-mint-hover: #23381a;
  --brand-mint-active: #2d4620;
  --brand-mint-light: #111a0d;
  
  /* 语义色 - 深色模式调整 */
  --semantic-positive: #1a9b5a;
  --semantic-positive-light: rgba(26, 155, 90, 0.2);
  
  --semantic-danger: #e05258;
  --semantic-danger-light: rgba(224, 82, 88, 0.2);
  
  --semantic-warning: #e6bc17;
  --semantic-warning-light: rgba(230, 188, 23, 0.2);
  
  --semantic-orange: #ff9966;
  --semantic-orange-light: rgba(255, 153, 102, 0.2);
  
  /* 中性色 - 深色模式 */
  --neutral-warm-dark: #a0a0a0;
  --neutral-warm-dark-hover: #b0b0b0;
  
  --neutral-gray: #6a6a6a;
  --neutral-gray-light: #4a4a4a;
  
  --neutral-light: #121212;
  --neutral-light-hover: #1a1a1a;
  --neutral-light-active: #0f0f0f;
  --neutral-light-border: #2a2a2a;
  
  /* 文本颜色 - 深色模式 */
  --text-primary: #f5f5f5;
  --text-secondary: #a0a0a0;
  --text-tertiary: #6a6a6a;
  --text-disabled: #4a4a4a;
  --text-inverse: #0a0f0c;
  --text-on-accent: #0a0f0c;
  
  /* 背景颜色 - 深色模式 */
  --bg-primary: #0a0a0a;
  --bg-secondary: #121212;
  --bg-tertiary: #1a1a1a;
  --bg-card: #161616;
  --bg-card-hover: #1f1f1f;
  --bg-overlay: rgba(0, 0, 0, 0.7);
  
  /* 边框 - 深色模式 */
  --border-default: #2a2a2a;
  --border-strong: #3a3a3a;
  --border-light: rgba(255, 255, 255, 0.05);
  
  /* 阴影 - 深色模式 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
}

/* ============================================
 * 自动深色模式（系统偏好）
 * ============================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* 继承深色模式的变量定义 */
    --brand-near-black: #f5f5f5;
    --brand-near-black-hover: #e8e8e8;
    --brand-near-black-active: #dbdbdb;
    
    --brand-wise-green: #8ed65e;
    --brand-wise-green-hover: #9fe870;
    --brand-wise-green-active: #7ec44c;
    --brand-wise-green-light: rgba(142, 214, 94, 0.15);
    
    --brand-dark-green: #2a4d0a;
    --brand-mint: #1a2a14;
    --brand-mint-hover: #23381a;
    --brand-mint-light: #111a0d;
    
    --semantic-positive: #1a9b5a;
    --semantic-positive-light: rgba(26, 155, 90, 0.2);
    --semantic-danger: #e05258;
    --semantic-danger-light: rgba(224, 82, 88, 0.2);
    --semantic-warning: #e6bc17;
    --semantic-warning-light: rgba(230, 188, 23, 0.2);
    --semantic-orange: #ff9966;
    
    --neutral-warm-dark: #a0a0a0;
    --neutral-gray: #6a6a6a;
    --neutral-gray-light: #4a4a4a;
    --neutral-light: #121212;
    --neutral-light-hover: #1a1a1a;
    --neutral-light-border: #2a2a2a;
    
    --text-primary: #f5f5f5;
    --text-secondary: #a0a0a0;
    --text-tertiary: #6a6a6a;
    --text-disabled: #4a4a4a;
    --text-inverse: #0a0f0c;
    
    --bg-primary: #0a0a0a;
    --bg-secondary: #121212;
    --bg-card: #161616;
    --bg-card-hover: #1f1f1f;
    
    --border-default: #2a2a2a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

/* ============================================
 * 辅助类
 * ============================================ */

/* 文本颜色辅助类 */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-success { color: var(--semantic-positive); }
.text-danger { color: var(--semantic-danger); }
.text-warning { color: var(--semantic-warning); }
.text-accent { color: var(--brand-wise-green); }

/* 背景颜色辅助类 */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-card { background-color: var(--bg-card); }
.bg-accent { background-color: var(--brand-wise-green); }
.bg-success { background-color: var(--semantic-positive-bg); }
.bg-danger { background-color: var(--semantic-danger-bg); }
.bg-warning { background-color: var(--semantic-warning-bg); }

/* 边框辅助类 */
.border-default { border-color: var(--border-default); }
.border-accent { border-color: var(--brand-wise-green); }
.border-success { border-color: var(--semantic-positive); }
.border-danger { border-color: var(--semantic-danger); }

/* 对比度优化 - WCAG AA 标准 */
.contrast-high {
  color: var(--brand-near-black);
}

[data-theme="dark"] .contrast-high {
  color: #ffffff;
}