/* ======================================================
   FOOTRADAPRO - 设计令牌系统
   沉稳高级版，支持真实模式 / 测试模式双主题
   ====================================================== */

/* ===== 颜色系统 - 真实模式（沉稳高级版）===== */
:root {
    /* 主色 - 更克制，更沉稳 */
    --brand-500: #F87C1A;
    --brand-400: #FF9F4A;
    --brand-300: #FFB870;
    --brand-200: #FFD19C;
    --brand-100: #FFEBD9;
    --brand-50: rgba(248, 124, 26, 0.12);
    --brand-rgb: 248, 124, 26;
    
    /* 品牌光晕 - 更柔和 */
    --brand-glow: 0 0 0 1px rgba(248, 124, 26, 0.35), 0 0 0 2px rgba(248, 124, 26, 0.1);
    --brand-glow-soft: 0 0 0 1px rgba(248, 124, 26, 0.25);
    --brand-glow-strong: 0 0 0 1px rgba(248, 124, 26, 0.5), 0 0 0 2px rgba(248, 124, 26, 0.2);
    
    /* 渐变 - 更平滑 */
    --gradient-primary: linear-gradient(135deg, #F87C1A, #FF9F4A);
    --gradient-secondary: linear-gradient(135deg, #FF9F4A, #F87C1A);
    
    /* 边框色 - 更明显 */
    --border-brand: rgba(248, 124, 26, 0.35);
    --border-brand-light: rgba(248, 124, 26, 0.2);
    --border-brand-strong: rgba(248, 124, 26, 0.45);
    
    /* 按钮阴影 */
    --btn-shadow-brand: 0 2px 10px rgba(248, 124, 26, 0.3);
    --btn-shadow-brand-hover: 0 4px 16px rgba(248, 124, 26, 0.4);
    /* 新增 - 盈利/亏损渐变 */
--gradient-profit: linear-gradient(135deg, #10B981, #34D399, #FFD700);
--gradient-loss: linear-gradient(135deg, #EF4444, #F97316);
--gradient-card: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));

/* 新增 - 高级阴影 */
--shadow-elevated: 0 20px 35px -12px rgba(0,0,0,0.25);
--shadow-glow-profit: 0 0 20px rgba(16,185,129,0.3);
--shadow-glow-loss: 0 0 20px rgba(239,68,68,0.2);
--shadow-glow-brand: 0 0 25px rgba(var(--brand-rgb), 0.4);

/* 新增 - 动画时长 */
--animation-slow: 0.6s cubic-bezier(0.2, 0.9, 0.4, 1.1);
--animation-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ===== 颜色系统 - 测试模式（沉稳高级版）===== */
.test-mode {
    --brand-500: #4A7AFF;
    --brand-400: #6E94FF;
    --brand-300: #92AEFF;
    --brand-200: #B6C8FF;
    --brand-100: #DAE4FF;
    --brand-rgb: 74, 122, 255;
    --brand-glow: 0 0 0 1px rgba(74, 122, 255, 0.35), 0 0 0 2px rgba(74, 122, 255, 0.1);
    --brand-glow-soft: 0 0 0 1px rgba(74, 122, 255, 0.25);
    --brand-glow-strong: 0 0 0 1px rgba(74, 122, 255, 0.5), 0 0 0 2px rgba(74, 122, 255, 0.2);
    --gradient-primary: linear-gradient(135deg, #4A7AFF, #6E94FF);
    --gradient-secondary: linear-gradient(135deg, #6E94FF, #4A7AFF);
    --border-brand: rgba(74, 122, 255, 0.35);
    --border-brand-light: rgba(74, 122, 255, 0.2);
    --border-brand-strong: rgba(74, 122, 255, 0.45);
    --btn-shadow-brand: 0 2px 10px rgba(74, 122, 255, 0.3);
    --btn-shadow-brand-hover: 0 4px 16px rgba(74, 122, 255, 0.4);
}

/* ===== 功能色 ===== */
:root {
    --success-500: #10B981;
    --success-400: #34D399;
    --success-50: rgba(16, 185, 129, 0.12);
    
    --danger-500: #EF4444;
    --danger-400: #F87171;
    --danger-50: rgba(239, 68, 68, 0.12);
    
    --warning-500: #F59E0B;
    --warning-400: #FBBF24;
    --warning-50: rgba(245, 158, 11, 0.12);
    
    --info-500: #3B82F6;
    --info-400: #60A5FA;
    --info-50: rgba(59, 130, 246, 0.12);
}

/* ===== 背景色系统 - 增加层次感 ===== */
/* ===== 背景色系统 - 与首页统一 ===== */
:root {
    --bg-deep: #111827;
    --bg-primary: #111827;
    --bg-secondary: #1F2937;
    --bg-tertiary: #111827;
    --bg-card: rgba(31, 41, 55, 0.6);
    --bg-card-hover: rgba(31, 41, 55, 0.8);
    --bg-surface: rgba(31, 41, 55, 0.8);
    --bg-nav: rgba(17, 24, 39, 0.95);
    --bg-header: rgba(17, 24, 39, 0.95);
}

/* ===== 文本色 - 增加对比 ===== */
:root {
    --text-primary: #FFFFFF;
    --text-secondary: #CBD5E6;
    --text-tertiary: #8B9BB0;
    --text-disabled: #4A5A78;
    --text-brand: var(--brand-400);
}

/* ===== 浅色模式 ===== */
[data-theme="light"] {
    --bg-deep: #F1F5F9;
    --bg-primary: #F8FAFC;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F1F5F9;
    --bg-card: rgba(255, 255, 255, 0.9);
    --bg-card-hover: rgba(255, 255, 255, 1);
    --bg-surface: rgba(255, 255, 255, 0.95);
    --bg-nav: rgba(255, 255, 255, 0.95);
    --bg-header: rgba(255, 255, 255, 0.95);
    
    --text-primary: #0F172A;
    --text-secondary: #334155;
    --text-tertiary: #64748B;
    
    --border-brand: rgba(247, 147, 26, 0.3);
    --border-brand-light: rgba(247, 147, 26, 0.2);
}

[data-theme="light"].test-mode {
    --border-brand: rgba(91, 140, 255, 0.3);
    --border-brand-light: rgba(91, 140, 255, 0.2);
}

/* ===== 间距系统（8px 网格）===== */
:root {
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
}

/* ===== 字体系统 ===== */
:root {
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    --text-xs: 10px;
    --text-sm: 11px;
    --text-base: 12px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 24px;
    --text-4xl: 32px;
    --text-5xl: 40px;
    
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
}

/* ===== 圆角系统 ===== */
:root {
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 9999px;
}

/* ===== 阴影系统（静态，无动画）===== */
:root {
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.25);
    --shadow-card: 0 8px 20px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 12px 28px rgba(0, 0, 0, 0.35);
}

/* ===== 过渡系统（仅保留基础反馈）===== */
:root {
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
}