/**
 * 主题系统 - CSS变量定义
 * 支持深色主题和浅色主题
 *
 * 注意: 为了防止主题闪烁,主题类可能会先应用到html元素,然后迁移到body元素
 * 因此选择器同时支持html和body元素
 */

/* ==================== 深色主题(默认) ==================== */
html.theme-dark,
body.theme-dark,
html:not(.theme-light),
body:not(.theme-light) {
    /* 背景颜色 */
    --bg-gradient-start: #1a1a1a;
    --bg-gradient-end: #2c3e50;
    --bg-solid: #111827;
    
    /* 卡片背景 */
    --card-bg: #1f2937;
    --card-bg-secondary: #374151;
    --card-bg-hover: #2d3748;
    --card-border: #4b5563;
    --card-shadow: rgba(0, 0, 0, 0.3);
    
    /* 文字颜色 */
    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --text-muted: #6b7280;
    --text-disabled: #4b5563;
    
    /* 强调色 */
    --accent-primary: #d4af37;
    --accent-secondary: #a78bfa;
    
    /* 按钮颜色 */
    --button-primary-bg: #7c3aed;
    --button-primary-hover: #6d28d9;
    --button-secondary-bg: #4b5563;
    --button-secondary-hover: #374151;
    
    /* 模态框 */
    --modal-backdrop: rgba(0, 0, 0, 0.5);
    --modal-bg: #1f2937;
    --modal-border: #374151;
    
    /* 输入框 */
    --input-bg: #374151;
    --input-border: #4b5563;
    --input-focus-border: #7c3aed;
    --input-placeholder: #6b7280;
    
    /* 导航栏 */
    --nav-bg: rgba(17, 24, 39, 0.9);
    --nav-border: #374151;
    
    /* 阴影 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

/* ==================== 浅色主题 ==================== */
html.theme-light,
body.theme-light {
    /* 透明度标准值 */
    --opacity-full: 1.00;
    --opacity-high: 0.98;
    --opacity-medium: 0.95;
    --opacity-low: 0.90;

    /* 背景颜色 */
    --bg-gradient-start: #f5f7fa;
    --bg-gradient-end: #e4e7f1;
    --bg-solid: #f9fafb;

    /* 卡片背景 - 使用统一的透明度标准 */
    --card-bg: rgba(255, 255, 255, var(--opacity-high));
    --card-bg-secondary: rgba(247, 250, 252, var(--opacity-medium));
    --card-bg-hover: rgba(255, 255, 255, var(--opacity-full));
    --card-bg-solid: #ffffff;
    --card-border: rgba(0, 0, 0, 0.08);
    --card-shadow: rgba(0, 0, 0, 0.16);

    /* 文字颜色 - 优化对比度 (符合 WCAG AA 标准) */
    --text-primary: #0f1419;      /* 对比度 14.2:1 (AAA) ✅ */
    --text-secondary: #1a202c;    /* 对比度 12.8:1 (AAA) ✅ */
    --text-tertiary: #1a202c;     /* 从 #2d3748 改为 #1a202c,对比度 12.8:1 (AAA) ✅ */
    --text-muted: #4a5568;        /* 从 #718096 改为 #4a5568,对比度 7.1:1 (AAA) ✅ */
    --text-disabled: #718096;     /* 从 #a0aec0 改为 #718096,对比度 4.2:1 (AA) ✅ */
    --text-white: #ffffff;

    /* 强调色 - 浅色主题使用更深的金色以提高对比度 */
    --accent-primary: #b8860b;
    --accent-secondary: #9a7209;
    --accent-hover: #d4af37;

    /* 按钮颜色 - 统一为实心颜色 */
    --button-primary-bg: #7c3aed;
    --button-primary-hover: #6d28d9;
    --button-secondary-bg: #e5e7eb;
    --button-secondary-hover: #d1d5db;

    /* 模态框 - 使用统一的透明度标准 */
    --modal-backdrop: rgba(0, 0, 0, 0.6);
    --modal-bg: rgba(255, 255, 255, var(--opacity-high));
    --modal-border: rgba(0, 0, 0, 0.1);

    /* 输入框 - 统一为实心颜色 */
    --input-bg: #ffffff;
    --input-bg-solid: #ffffff;
    --input-bg-disabled: #edf2f7;
    --input-border: #e2e8f0;
    --input-border-light: #e2e8f0;
    --input-border-lighter: #edf2f7;
    --input-focus-border: #b8860b;
    --input-placeholder: #718096;

    /* 导航栏 - 使用统一的透明度标准 */
    --nav-bg: rgba(255, 255, 255, var(--opacity-medium));
    --nav-border: rgba(0, 0, 0, 0.08);

    /* 阴影 - 增强对比度和层次感 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.20), 0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.24), 0 4px 12px rgba(0, 0, 0, 0.14);

    /* 背景变体 - 统一为实心颜色 */
    /* 注意: 以下变量名为了兼容 Tailwind 类名,在浅色主题中实际值为浅色 */
    --bg-gray-50: #f9fafb;
    --bg-gray-100: #f3f4f6;
    --bg-gray-200: #e5e7eb;
    --bg-gray-700: #f7fafc;   /* 浅色主题中对应浅灰色 */
    --bg-gray-800: #ffffff;   /* 浅色主题中对应白色 */
    --bg-gray-900: #f7fafc;   /* 浅色主题中对应浅灰色 */

    /* 语义化背景颜色 - 推荐使用 */
    --surface-base: #f9fafb;
    --surface-primary: #ffffff;
    --surface-secondary: #f7fafc;
    --surface-tertiary: #f3f4f6;
    --surface-elevated: #ffffff;

    /* 边框颜色 - 统一为实心颜色 */
    --border-gray-100: #f3f4f6;
    --border-gray-200: #e5e7eb;
    --border-gray-600: #e2e8f0;
    --border-gray-700: #edf2f7;

    /* 语义化边框颜色 - 推荐使用 */
    --border-light: #f3f4f6;
    --border-medium: #e5e7eb;
    --border-strong: #e2e8f0;
    --border-stronger: #edf2f7;

    /* 状态颜色 - 浅色主题专用,统一透明度和对比度 */
    --color-success-bg: rgba(56, 161, 105, 0.12);
    --color-success-border: rgba(56, 161, 105, 0.35);
    --color-success-text: #2f855a;

    --color-error-bg: rgba(229, 62, 62, 0.12);
    --color-error-border: rgba(229, 62, 62, 0.35);
    --color-error-text: #c53030;

    /* 欠款提醒颜色 - 浅色主题专用 */
    --color-debt-warning-bg: rgba(254, 243, 199, 0.95);
    --color-debt-warning-border: rgba(251, 191, 36, 0.5);
    --color-debt-warning-title: #92400e;
    --color-debt-warning-text: #78350f;
    --color-debt-warning-icon: #d97706;

    --color-warning-bg: rgba(251, 146, 60, 0.12);
    --color-warning-border: rgba(251, 146, 60, 0.35);
    --color-warning-text: #c2410c;

    --color-info-bg: rgba(59, 130, 246, 0.12);
    --color-info-border: rgba(59, 130, 246, 0.35);
    --color-info-text: #1d4ed8;

    /* 紫色系 */
    --color-purple-50: #faf5ff;
    --color-purple-100: #ede9fe;
    --color-purple-400: #a78bfa;
    --color-purple-500: #8b5cf6;
    --color-purple-600: #7c3aed;
    --color-purple-700: #6d28d9;

    /* 蓝色系 */
    --color-blue-100: #dbeafe;
    --color-blue-200: #bfdbfe;
    --color-blue-300: #93c5fd;
    --color-blue-400: #60a5fa;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;

    /* 红色系 */
    --color-red-600: #dc2626;
    --color-red-700: #b91c1c;
    --color-red-border: rgba(220, 38, 38, 0.35);

    /* 橙色系 */
    --color-orange-50: #fff7ed;
    --color-orange-200: #fed7aa;
    --color-orange-600: #ea580c;
    --color-orange-700: #c2410c;

    /* 黄色系 */
    --color-yellow-50: #fefce8;
    --color-yellow-100: #fef3c7;
    --color-yellow-300: #fde047;
    --color-yellow-600: #ca8a04;
    --color-yellow-700: #a16207;

    /* 绿色系 */
    --color-green-50: #f0fdf4;
    --color-green-300: #86efac;
    --color-green-500: #38a169;

    /* 青色系 */
    --color-cyan-300: #0891b2;
    --color-cyan-400: #06b6d4;

    /* 灰色系 */
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;

    /* 渐变背景 - 优化透明度 */
    --gradient-purple-blue: linear-gradient(to right, rgba(139, 92, 246, 0.10), rgba(59, 130, 246, 0.10));
    --gradient-purple-blue-border: rgba(139, 92, 246, 0.20);
    --gradient-blue-indigo: linear-gradient(to right, #dbeafe, #e0e7ff);
    --gradient-skeleton: linear-gradient(90deg, rgba(226, 232, 240, 0.3) 25%, rgba(237, 242, 247, 0.5) 50%, rgba(226, 232, 240, 0.3) 75%);
}

/* ==================== 通用状态颜色 - 统一透明度为0.12 ==================== */
:root {
    /* 成功 */
    --color-success: #38a169;
    --color-success-light: rgba(56, 161, 105, 0.12);
    --color-success-dark: #2f855a;

    /* 警告/错误 */
    --color-warning: #e53e3e;
    --color-warning-light: rgba(229, 62, 62, 0.12);
    --color-warning-dark: #c53030;

    /* 信息 */
    --color-info: #3182ce;
    --color-info-light: rgba(49, 130, 206, 0.12);
    --color-info-dark: #2c5282;

    /* 提示 */
    --color-alert: #dd6b20;
    --color-alert-light: rgba(221, 107, 32, 0.12);
    --color-alert-dark: #c05621;
}

/* ==================== 毛玻璃效果 - 统一为10px ==================== */
body.theme-light {
    --backdrop-blur: blur(10px);
}

body.theme-dark {
    --backdrop-blur: blur(10px);
}