/* ============================================
   AI 面试官 v2.0 - 活泼创新产品风设计令牌
   设计灵感：Duolingo + Slack + Figma
   关键词：鲜艳 · 温暖 · 有温度 · 年轻化
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* ============================================
       品牌色 - 成长绿（Duolingo 启发）
       ============================================ */
    --brand-50: #f0fce8;
    --brand-100: #dcf8c8;
    --brand-200: #b9ef85;
    --brand-300: #89e219;       /* hover 浅色 */
    --brand-400: #58cc02;       /* 品牌主色 - 活力成长 */
    --brand-500: #3b8c00;       /* 深色 */
    --brand-600: #2d6b00;
    --brand-700: #1f4a00;

    /* ============================================
       AI 智能紫（Slack 启发）- 用于 AI 功能标识
       ============================================ */
    --ai-50: #faf5ff;
    --ai-100: #f3e8ff;
    --ai-200: #e9d5ff;
    --ai-300: #d8b4fe;
    --ai-400: #c084fc;
    --ai-500: #a855f7;
    --ai-600: #9333ea;          /* AI 主色 */
    --ai-700: #7c3aed;          /* 深 AI 紫 */
    --ai-800: #6b21a8;
    --ai-900: #581c87;

    /* ============================================
       CTA 行动橙（暖色系行动力）
       ============================================ */
    --cta-50: #fff7ed;
    --cta-100: #ffedd5;
    --cta-200: #fed7aa;
    --cta-300: #fdba74;
    --cta-400: #fb923c;
    --cta-500: #ff6b35;         /* CTA 主色 - 温暖行动 */
    --cta-600: #ea580c;
    --cta-700: #c2410c;

    /* ============================================
       阳光黄 - 强调/提示/徽章
       ============================================ */
    --accent-50: #fffbeb;
    --accent-100: #fef3c7;
    --accent-200: #fde68a;
    --accent-300: #fcd34d;
    --accent-400: #fbbf24;
    --accent-500: #f59e0b;
    --accent-600: #d97706;

    /* ============================================
       功能色 - 鲜艳活泼版
       ============================================ */
    --success: #22c55e;
    --success-light: #dcfce7;
    --success-dark: #15803d;
    --success-bg: #f0fdf4;

    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --warning-dark: #b45309;
    --warning-bg: #fffbeb;

    --danger: #ef4444;
    --danger-light: #fee2e2;
    --danger-dark: #b91c1c;
    --danger-bg: #fef2f2;

    --info: #3b82f6;
    --info-light: #dbeafe;
    --info-dark: #1d4ed8;
    --info-bg: #eff6ff;

    /* ============================================
       中性色 - 暖灰系（有温度）
       ============================================ */
    --gray-50: #fafaf9;         /* 暖白 */
    --gray-100: #f5f5f4;
    --gray-200: #e7e5e4;
    --gray-300: #d6d3d1;
    --gray-400: #a8a29e;
    --gray-500: #78716c;
    --gray-600: #57534e;
    --gray-700: #44403c;
    --gray-800: #292524;
    --gray-900: #1c1917;

    /* ============================================
       背景色 - 奶油暖白（温度感）
       ============================================ */
    --bg-primary: #fffcf7;      /* 奶油白 - 温暖主背景 */
    --bg-secondary: #faf8f3;    /* 次级背景 */
    --bg-tertiary: #f5f2ec;     /* 三级背景 */
    --bg-card: #ffffff;         /* 卡片白底 */
    --bg-hover: #fff9f0;        /* 悬停暖色 */
    --bg-brand: #f0fce8;        /* 品牌浅底 */
    --bg-ai: #faf5ff;           /* AI 浅紫底 */

    /* ============================================
       文字色 - 深紫黑（柔和而非纯黑）
       ============================================ */
    --text-primary: #1e1b4b;    /* 深紫黑 */
    --text-secondary: #57534e;
    --text-tertiary: #a8a29e;
    --text-inverse: #ffffff;
    --text-brand: #3b8c00;
    --text-ai: #7c3aed;
    --text-cta: #ea580c;

    /* ============================================
       边框 - 柔和暖灰
       ============================================ */
    --border-light: #f0ece5;
    --border-medium: #e7e5e4;
    --border-dark: #d6d3d1;
    --border-brand: #b9ef85;
    --border-ai: #d8b4fe;

    /* ============================================
       渐变（活泼品牌色）
       ============================================ */
    --gradient-brand: linear-gradient(135deg, #58cc02 0%, #89e219 100%);
    --gradient-ai: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    --gradient-cta: linear-gradient(135deg, #ff6b35 0%, #fb923c 100%);
    --gradient-warm: linear-gradient(135deg, #fbbf24 0%, #ff6b35 100%);
    --gradient-rainbow: linear-gradient(135deg, #58cc02 0%, #3b82f6 33%, #7c3aed 66%, #ff6b35 100%);
    --gradient-sidebar: linear-gradient(180deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);

    /* ============================================
       阴影 - 柔和有层次 + 品牌色阴影
       ============================================ */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 8px 24px -4px rgba(0, 0, 0, 0.10), 0 4px 8px -2px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 16px 40px -8px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.06);
    --shadow-2xl: 0 24px 48px -12px rgba(0, 0, 0, 0.16);
    /* 品牌色阴影 - 用于按钮和卡片的高亮 */
    --shadow-brand: 0 4px 14px 0 rgba(88, 204, 2, 0.32);
    --shadow-brand-lg: 0 8px 24px -4px rgba(88, 204, 2, 0.40);
    --shadow-ai: 0 4px 14px 0 rgba(124, 58, 237, 0.28);
    --shadow-ai-lg: 0 8px 24px -4px rgba(124, 58, 237, 0.36);
    --shadow-cta: 0 4px 14px 0 rgba(255, 107, 53, 0.36);
    --shadow-cta-lg: 0 8px 24px -4px rgba(255, 107, 53, 0.44);

    /* ============================================
       圆角 - 更大更柔和
       ============================================ */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 9999px;

    /* ============================================
       间距系统
       ============================================ */
    --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;
    --space-16: 64px;
    --space-20: 80px;

    /* ============================================
       字体系统 - 双字体策略
       ============================================ */
    --font-display: 'Plus Jakarta Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-sans: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* ============================================
       字号 - 略放大更有冲击力
       ============================================ */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 36px;
    --text-5xl: 48px;

    /* 字重 */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    /* 行高 */
    --leading-tight: 1.2;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    /* ============================================
       动效 - 有弹性的缓动
       ============================================ */
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);   /* 弹性回弹 */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);        /* 平滑 */
    --ease-out-back: cubic-bezier(0.16, 1, 0.3, 1);     /* 缓出后弹 */

    --transition-fast: 150ms var(--ease-smooth);
    --transition-base: 250ms var(--ease-smooth);
    --transition-bounce: 350ms var(--ease-bounce);
    --transition-slow: 450ms var(--ease-out-back);

    /* ============================================
       Z-index 层级
       ============================================ */
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1100;
    --z-overlay: 1200;
    --z-modal: 1300;
    --z-toast: 1400;
    --z-tooltip: 1500;

    /* ============================================
       组件尺寸
       ============================================ */
    --sidebar-width: 260px;
    --sidebar-collapsed: 72px;
    --header-height: 64px;
    --btn-height-sm: 32px;
    --btn-height-md: 40px;
    --btn-height-lg: 48px;
    --input-height: 40px;
}

/* ============================================
   全局基础样式 - 暖色温度感
   ============================================ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    line-height: var(--leading-tight);
}

a {
    color: var(--brand-400);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--brand-500);
}

/* 滚动条美化 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-tertiary);
    transition: background var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-400);
}

::selection {
    background: var(--brand-200);
    color: var(--brand-700);
}

/* 文字渐变效果 */
.text-gradient-brand {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-ai {
    background: var(--gradient-ai);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-warm {
    background: var(--gradient-warm);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   暗色模式变量集（深紫黑基调）
   设计决策：覆盖 :root 中的背景/文字/边框/灰阶/阴影变量，
   body/card/表单等元素因引用变量而自动适配暗色，无需逐个改写
   ============================================ */
[data-theme="dark"] {
    --bg-primary: #1a1625;        /* 深紫黑背景 */
    --bg-secondary: #221d33;     /* 次级背景 */
    --bg-tertiary: #2a2440;      /* 三级背景 */
    --bg-card: #221d33;          /* 卡片背景 */
    --bg-hover: #2a2440;         /* 悬停背景 */
    --bg-brand: #1a2e0a;         /* 品牌浅底（暗色版） */
    --bg-ai: #1f1333;            /* AI 浅紫底（暗色版） */

    --text-primary: #fafaf9;     /* 主文字-暖白 */
    --text-secondary: #a8a29e;   /* 次文字 */
    --text-tertiary: #78716c;    /* 三级文字 */
    --text-brand: #89e219;       /* 品牌绿字 */
    --text-ai: #c084fc;          /* AI 紫字 */

    --border-light: #2a2440;     /* 暗色边框 */
    --border-medium: #3a3358;
    --border-dark: #4a4373;

    --gray-50: #1a1625;          /* 暗色灰阶 */
    --gray-100: #221d33;
    --gray-200: #2a2440;
    --gray-300: #3a3358;
    --gray-400: #6b7280;
    --gray-500: #9ca3af;
    --gray-600: #d1d5db;
    --gray-700: #e5e7eb;
    --gray-800: #f3f4f6;
    --gray-900: #f9fafb;

    /* 阴影调整 - 暗色用更深的阴影 */
    --shadow-sm: 0 2px 8px -2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px -4px rgba(0,0,0,0.5);

    /* 暗色遮罩更深 */
    --gradient-warm: linear-gradient(135deg, #92400e 0%, #c2410c 100%);
    --gradient-sidebar: linear-gradient(180deg, #0f0a1f 0%, #1a1625 50%, #2a1f4a 100%);
}

/* ============================================
   暗色模式组件级覆盖
   处理使用硬编码颜色或需要特殊对比度的组件
   ============================================ */

/* 模态遮罩 - 暗色下用更深的紫黑 */
[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.7);
}

/* 移动端遮罩 - 暗色更深 */
[data-theme="dark"] .sidebar-overlay {
    background: rgba(0, 0, 0, 0.6);
}

/* 空状态图标渐变 - 暗色用更深暖色保持对比度 */
[data-theme="dark"] .empty-state-icon {
    background: linear-gradient(135deg, #c2410c, #7c2d12);
    box-shadow: 0 8px 24px -4px rgba(194, 65, 12, 0.3);
}

/* 搜索框背景图标的颜色 - 暗色下变浅灰提升可见度 */
[data-theme="dark"] .search-input {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
}

/* 加载遮罩 - 暗色用半透明深底 */
[data-theme="dark"] .loading-overlay {
    background: rgba(26, 22, 37, 0.85);
}

/* SVG 插画投影 - 暗色用紫色光晕 */
[data-theme="dark"] .illustration svg {
    filter: drop-shadow(0 8px 16px rgba(192, 132, 252, 0.2));
}

/* 按钮 hover filter 适度收一点，避免暗色下过亮 */
[data-theme="dark"] .btn-primary:hover:not(:disabled),
[data-theme="dark"] .btn-ai:hover:not(:disabled),
[data-theme="dark"] .btn-cta:hover:not(:disabled),
[data-theme="dark"] .btn-success:hover:not(:disabled),
[data-theme="dark"] .btn-danger:hover:not(:disabled) {
    filter: brightness(1.12);
}

/* 表单 focus 光圈 - 暗色用更亮品牌色 */
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .search-input:focus {
    box-shadow: 0 0 0 4px rgba(137, 226, 25, 0.24);
    border-color: var(--brand-300);
}

/* 文字选区 - 暗色用浅绿底 */
[data-theme="dark"] ::selection {
    background: rgba(137, 226, 25, 0.3);
    color: var(--brand-200);
}

/* 滚动条 - 暗色用深紫灰 */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-color: var(--bg-tertiary);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--brand-400);
}

/* 表格 hover - 暗色用更深的紫底 */
[data-theme="dark"] .table-hover tbody tr:hover,
[data-theme="dark"] .data-table tbody tr:hover,
[data-theme="dark"] .data-table tr:hover td {
    background: var(--bg-hover);
}

/* 通知未读 - 暗色用更深的品牌底 */
[data-theme="dark"] .notification-item.unread {
    background: var(--bg-brand);
    border-left-color: var(--brand-300);
}
[data-theme="dark"] .notification-item.unread:hover {
    background: rgba(137, 226, 25, 0.1);
}

/* 技能标签暗色调整 - 加深底色提升对比度 */
[data-theme="dark"] .skill-tag-expert {
    background: linear-gradient(135deg, #500732, #831843) !important;
    color: #fbcfe8 !important;
    border-color: #be185d !important;
}
[data-theme="dark"] .skill-tag-proficient {
    background: linear-gradient(135deg, #3b0764, #5b21b6) !important;
    color: #e9d5ff !important;
    border-color: var(--ai-500) !important;
}
[data-theme="dark"] .skill-tag-familiar {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-medium) !important;
}

/* 批量工具栏 - 暗色用深绿底 */
[data-theme="dark"] .batch-toolbar {
    background: var(--bg-brand);
    border-color: var(--brand-700);
}

/* 上传区 hover - 暗色用浅绿点缀 */
[data-theme="dark"] .upload-zone:hover,
[data-theme="dark"] .upload-zone.dragover {
    background: var(--bg-brand);
    border-color: var(--brand-400);
}

/* mark 标记 - 暗色用深底浅字 */
[data-theme="dark"] mark {
    background: rgba(251, 191, 36, 0.25);
    color: var(--accent-200);
}