/* CSS 变量定义 */
:root {
    /* 主题色 - 现代蓝色系 (更鲜艳) */
    --primary-color: #2563eb; /* Blue 600 */
    --primary-hover: #1d4ed8; /* Blue 700 */
    --primary-light: #eff6ff; /* Blue 50 */
    --secondary-color: #0891b2; /* Cyan 600 */
    --gradient: linear-gradient(135deg, #2563eb 0%, #0891b2 100%);

    /* 功能色 */
    --success-color: #10b981;  /* Emerald 500 */
    --warning-color: #f59e0b;  /* Amber 500 */
    --danger-color: #f43f5e;   /* Rose 500 (Updated from Red) */
    --info-color: #0ea5e9;     /* Sky 500 */

    /* Architect 建议的深色主题变量 */
    --dark-bg-primary: #0f172a; /* Slate 900 */
    --dark-bg-secondary: #1e293b; /* Slate 800 */
    --dark-bg-tertiary: #334155; /* Slate 700 */
    --dark-text-primary: #f8fafc; /* Slate 50 */
    --dark-text-secondary: #cbd5e1; /* Slate 300 */
    --dark-text-tertiary: #94a3b8; /* Slate 400 */
    --dark-border-color: #334155; /* Slate 700 */
    --dark-accent-primary: #f43f5e; /* Rose 500 */
    --dark-accent-secondary: #3b82f6; /* Blue 500 */
    --dark-accent-gradient: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 100%);

    /* ==========================================================================
       语义变量 (Semantic Variables) - 亮色模式
       这些变量会在 dark-mode.css 中被 [data-theme="dark"] 覆盖
       ========================================================================== */

    /* 背景色系统 (Background) */
    --bg-primary: #ffffff;          /* 主背景：纯白 */
    --bg-secondary: #f8fafc;      /* 次级背景：极淡蓝灰 (侧边栏、卡片) */
    --bg-tertiary: #f1f5f9;      /* 三级背景：淡蓝灰 (输入框、hover) */
    --bg-elevated: #ffffff;         /* 悬浮元素背景 */
    --bg-hover: #f1f5f9;         /* 通用悬停状态 */

    /* 文字色系统 (Text) - WCAG AA 对比度合规 */
    --text-primary: #0f172a;     /* 标题/正文：深蓝灰 */
    --text-secondary: #475569;   /* 描述文字：中蓝灰 */
    --text-tertiary: #64748b;    /* 占位符/元数据：浅蓝灰 */
    --text-disabled: #94a3b8;    /* 禁用状态 */
    --text-inverse: #ffffff;        /* 反色文字 (用于深色背景按钮) */

    /* 边框色系统 (Border) */
    --border-color: #e2e8f0;     /* 通用边框 */
    --border-light: #f1f5f9;     /* 浅边框 */
    --border-dark: #cbd5e1;      /* 深边框/强调边框 */

    /* 阴影系统 */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* 圆角系统 */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;

    /* Badge 背景色 - 亮色模式 */
    --info-bg: rgba(59, 130, 246, 0.1);
    --success-bg: rgba(16, 185, 129, 0.1);
    --warning-bg: rgba(245, 158, 11, 0.1);
    --danger-bg: rgba(239, 68, 68, 0.1);
    --indigo-bg: rgba(99, 102, 241, 0.1);
    --pink-bg: rgba(236, 72, 153, 0.1);

    /* Badge 文本色 - 亮色模式 (比功能色稍深以提高对比度) */
    --success-text: #059669;
    --warning-text: #d97706;
    --danger-text: #dc2626;
    --info-text: #2563eb;
    --gray-text: #4b5563;

    /* 玻璃拟态背景 (Legacy) */
    --glass-pane-bg: rgba(255, 255, 255, 0.7);
    --glass-pane-border: rgba(255, 255, 255, 0.5);
    --backdrop-blur: blur(12px);

    /* 现代玻璃拟态系统 (Glassmorphism System) */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-blur: blur(12px);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

    /* 中性色 */
    --white: #ffffff;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --black: #000000;

    /* 字体 */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.875rem;
    /* 14px */
    --font-size-base: 1rem;
    /* 16px */
    --font-size-lg: 1.125rem;
    /* 18px */
    --font-size-xl: 1.25rem;
    /* 20px */
    --font-size-2xl: 1.5rem;
    /* 24px */
    --font-size-3xl: 1.875rem;
    /* 30px */

    /* 间距 */
    --spacing-1: 0.25rem;
    /* 4px */
    --spacing-2: 0.5rem;
    /* 8px */
    --spacing-3: 0.75rem;
    /* 12px */
    --spacing-4: 1rem;
    /* 16px */
    --spacing-5: 1.25rem;
    /* 20px */
    --spacing-6: 1.5rem;
    /* 24px */
    --spacing-8: 2rem;
    /* 32px */
    --spacing-10: 2.5rem;
    /* 40px */
    --spacing-12: 3rem;
    /* 48px */

    /* 圆角 */
    --radius-sm: 0.25rem;
    /* 4px */
    --radius-md: 0.5rem;
    /* 8px */
    --radius-lg: 0.75rem;
    /* 12px */
    --radius-xl: 1rem;
    /* 16px */
    --radius-full: 9999px;

    /* 阴影 - Premium System */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-primary: 0 4px 14px rgba(59, 130, 246, 0.35);
    /* Based on primary color */
    --shadow-primary-hover: 0 10px 25px -3px rgba(59, 130, 246, 0.45);

    /* 过渡与动画 (Easings) */
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    --transition-fast: 150ms var(--ease-in-out);
    --transition-base: 200ms var(--ease-in-out);
    --transition-slow: 300ms var(--ease-in-out);
    --transition-bounce: 300ms var(--ease-spring);

    /* 覆盖层 - 亮色模式 */
    --overlay-light: rgba(0, 0, 0, 0.3);
    --overlay-medium: rgba(0, 0, 0, 0.5);
    --overlay-heavy: rgba(0, 0, 0, 0.7);

    /* Z-index 层级 */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;

    /* 布局 */
    --header-height: 64px;
    --sidebar-width: 240px;
    --container-max-width: 1280px;

    /* ==========================================================================
       高级效果变量 (Premium Effects)
       ========================================================================== */

    /* 渐变色系 - 蓝青色调 */
    --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #0284c7 100%);
    --gradient-secondary: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);
    --gradient-aurora: linear-gradient(135deg, #22d3ee 0%, #38bdf8 50%, #3b82f6 100%);
    --gradient-sunset: linear-gradient(135deg, #f472b6 0%, #fcd34d 100%);
    --gradient-ocean: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 50%, #06b6d4 100%);

    /* 光晕效果 - 蓝青色调 */
    --glow-primary: rgba(59, 130, 246, 0.5);
    --glow-secondary: rgba(6, 182, 212, 0.5);
    --glow-accent: rgba(14, 165, 233, 0.4);
    --glow-success: rgba(16, 185, 129, 0.4);
    --glow-warning: rgba(245, 158, 11, 0.4);
    --glow-danger: rgba(239, 68, 68, 0.4);

    /* 高级卡片背景 */
    --card-bg-gradient: linear-gradient(145deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(249, 250, 251, 0.9) 100%);
    --card-bg-glass: rgba(255, 255, 255, 0.7);
    --card-bg-frosted: rgba(255, 255, 255, 0.85);

    /* 流动背景色 - 蓝青色调 */
    --flow-color-1: rgba(59, 130, 246, 0.15);
    --flow-color-2: rgba(6, 182, 212, 0.12);
    --flow-color-3: rgba(14, 165, 233, 0.1);
    --flow-color-4: rgba(34, 211, 238, 0.1);

    /* 网格/点阵背景 - 蓝青色调 */
    --grid-color: rgba(59, 130, 246, 0.08);
    --grid-size: 40px;
    --dot-color: rgba(59, 130, 246, 0.2);
    --dot-size: 2px;
    --dot-spacing: 30px;

    /* 动画时间 */
    --flow-duration: 3s;
    --shimmer-duration: 2s;
    --pulse-duration: 2s;

    /* 边框效果 */
    --border-gradient-width: 2px;
    --border-glow-spread: 8px;

    /* 兼容变量 - 旧页面/重构前样式仍在引用，统一映射到当前设计 token */
    --accent-color: var(--secondary-color);
    --surface-color: var(--bg-elevated);
    --card-bg: var(--bg-elevated);
    --input-bg: var(--bg-tertiary);
    --text-muted: var(--text-tertiary);
    --error-color: var(--danger-color);
    --danger-light: var(--danger-bg);
    --danger-rgb: 244, 63, 94;
    --primary-rgb: 37, 99, 235;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-500-rgb: 59, 130, 246;
    --primary-dark: var(--primary-hover);
    --primary-bg: var(--primary-light);
    --primary-color-hover: var(--primary-hover);
    --primary-color-light: var(--primary-light);
    --primary-color-alpha-05: rgba(37, 99, 235, 0.05);
    --primary-color-alpha-10: rgba(37, 99, 235, 0.10);
    --primary-color-alpha-30: rgba(37, 99, 235, 0.30);
    --primary-color-alpha-40: rgba(37, 99, 235, 0.40);

    --red-50: #fff1f2;
    --red-100: #ffe4e6;
    --red-500: var(--danger-color);
    --red-600: #e11d48;
    --red-700: #be123c;
    --gray-750: #27364a;
    --gray-850: #172033;

    --bg-secondary-dark: var(--dark-bg-secondary);
    --border-color-dark: var(--dark-border-color);
    --text-primary-dark: var(--dark-text-primary);

    --radius-xs: 0.125rem;
    --text-xs: var(--font-size-xs);
    --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.25);

    --mouse-x: 50%;
    --mouse-y: 50%;
    --ref-preview-w: 120px;
    --ref-preview-h: 120px;

    /* 详情页语义变量 */
    --detail-header-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(8, 145, 178, 0.08));
    --detail-header-border: var(--border-color);
    --detail-header-shadow: var(--shadow-sm);
    --summary-card-bg: var(--card-bg);
    --meta-item-bg: var(--bg-secondary);
    --meta-item-border: var(--border-color);
    --meta-item-color: var(--text-secondary);
    --pill-status-bg: var(--success-bg);
    --pill-status-border: rgba(16, 185, 129, 0.22);
    --pill-status-color: var(--success-text);
    --pill-model-bg: var(--info-bg);
    --pill-model-border: rgba(37, 99, 235, 0.22);
    --pill-model-color: var(--info-text);
    --pill-time-bg: var(--bg-tertiary);
    --pill-time-border: var(--border-color);
    --pill-time-color: var(--text-secondary);
    --progress-bar-gradient: var(--gradient-primary);
    --article-body-bg: var(--bg-elevated);
    --article-cta-bg: var(--primary-color);
    --article-cta-color: var(--text-inverse);
    --article-cta-label-bg: rgba(255, 255, 255, 0.18);
    --article-cta-label-color: var(--text-inverse);
    --canvas-mask-header-bg: var(--bg-secondary);
    --canvas-mask-body-bg: var(--bg-primary);
    --edit-panel-header-bg: var(--bg-secondary);
    --edit-preview-bg: var(--bg-tertiary);
    --modal-image-bg: var(--bg-secondary);
    --chart-placeholder-bg: var(--bg-secondary);
}

[data-theme="dark"] {
    --glass-bg: rgba(30, 41, 59, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
}