/* ==================== 易算AI - 全局设计令牌 (Design Tokens) ==================== */
/* 版本: 2.0.0 | 用途: 统一管理所有CSS变量，确保设计一致性 */
/* 加载顺序: 必须作为第一个CSS文件加载 */

/* ==================== 主色调系统 ==================== */
:root {
    /* ===== 主色 - 品牌蓝 (#1e9fff) ===== */
    --primary: #1e9fff;
    --primary-hover: #4db3ff;
    --primary-active: #0084e8;
    --primary-light: #e6f4ff;
    --primary-ultra-light: #f0f8ff;
    --primary-dark: #0073d1;
    --primary-gradient: linear-gradient(135deg, #1e9fff 0%, #0073d1 100%);
    --primary-gradient-hover: linear-gradient(135deg, #4db3ff 0%, #1e9fff 100%);
    --primary-bg: rgba(30, 159, 255, 0.06);
    --primary-hover-bg: rgba(30, 159, 255, 0.15);
    --primary-active-bg: rgba(30, 159, 255, 0.18);

    /* ===== 辅助色 - 功能色 ===== */
    --success: #52c41a;
    --success-hover: #6dd436;
    --success-light: #f0fdf4;
    --success-border: #bbf7d0;
    --success-gradient: linear-gradient(135deg, #52c41a 0%, #45a816 100%);

    --warning: #faad14;
    --warning-hover: #ffc53d;
    --warning-light: #fefce8;
    --warning-border: #fde68a;
    --warning-gradient: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);

    --error: #ff4d4f;
    --error-hover: #ff7875;
    --error-light: #fff1f0;
    --error-border: #ffccc7;
    --error-gradient: linear-gradient(135deg, #ff4d4f 0%, #e04345 100%);

    --info: #1e9fff;
    --info-light: #e6f4ff;
    --info-border: #93c5fd;

    /* ===== 中性色 - 灰度系统 ===== */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* ===== 背景色系统 ===== */
    --bg-page: linear-gradient(180deg, #fefcfb 0%, #f7f3ee 100%);
    --bg-page-solid: #fefcfb;
    --bg-card: #ffffff;
    --bg-card-hover: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
    --bg-input: linear-gradient(145deg, #ffffff, #fafbfc);
    --bg-input-hover: linear-gradient(145deg, #ffffff, #f9fafb);
    --bg-input-focus: linear-gradient(145deg, #ffffff, #eff6ff);
    --bg-overlay: rgba(0, 0, 0, 0.45);
    --bg-disabled: #f3f4f6;

    /* ===== 文本色系统 ===== */
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-tertiary: #9ca3af;
    --text-white: #ffffff;
    --text-link: #1c9fff;
    --text-disabled: #d1d5db;
    --text-inverse: #ffffff;

    /* ===== 边框色系统 ===== */
    --border: #e5e7eb;
    --border-light: #f3f4f6;
    --border-focus: #93c5fd;
    --border-error: #ff4d4f;
    --border-success: #52c41a;
    --border-hover: #d1d5db;

    /* ==================== 字体系统 ==================== */
    /* ===== 字体族 ===== */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
    --font-serif: 'KaiTi', '楷体', 'STKaiti', 'SimSun', '宋体', serif;

    /* ===== 字号系统 ===== */
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 13px;
    --text-lg: 15px;
    --text-xl: 17px;
    --text-2xl: 20px;
    --text-3xl: 24px;
    --text-4xl: 30px;
    --text-5xl: 36px;

    /* ===== 字重系统 ===== */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* ===== 行高系统 ===== */
    --leading-none: 1;
    --leading-tight: 1.35;
    --leading-snug: 1.45;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;
    --leading-loose: 2;

    /* ===== 字间距 ===== */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* ==================== 间距系统 ==================== */
    --spacing-2xs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 48px;
    --spacing-4xl: 64px;
    --spacing-5xl: 80px;

    /* ==================== 圆角系统 ==================== */
    --radius-none: 0;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-full: 9999px;

    /* ==================== 阴影系统 ==================== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.08);
    --shadow-2xl: 0 30px 60px rgba(0, 0, 0, 0.12), 0 12px 24px rgba(0, 0, 0, 0.1);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-focus: 0 0 0 4px rgba(30, 159, 255, 0.12);
    --shadow-error: 0 0 0 4px rgba(255, 77, 79, 0.1);
    --shadow-success: 0 0 0 4px rgba(82, 196, 26, 0.1);
    --shadow-warning: 0 0 0 4px rgba(250, 173, 20, 0.1);
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* ==================== 过渡动画系统 ==================== */
    --transition-instant: 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ==================== 断点系统 ==================== */
    /*
     * 【断点使用规范】
     * CSS 自定义属性不能在 @media 查询中使用，
     * 以下变量作为「单一事实来源」的文档参考，
     * 实际 @media 中仍需硬编码对应的 px 值。
     *
     * 标准断点（全项目统一，禁止使用其他值）：
     *   手机:  @media (max-width: 767px) { ... }
     *   平板:  @media (min-width: 768px) and (max-width: 1023px) { ... }
     *   桌面:  @media (min-width: 1024px) { ... }
     */
    --bp-mobile: 767px;     /* 手机: max-width: 767px */
    --bp-tablet-min: 768px; /* 平板起: min-width: 768px */
    --bp-tablet-max: 1023px;/* 平板止: max-width: 1023px */
    --bp-desktop: 1024px;   /* 桌面: min-width: 1024px */

    /* ==================== Z-index层级系统 ==================== */
    --z-hide: -1;
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-tooltip: 600;
    --z-toast: 700;
    --z-max: 9999;

    /* ==================== 容器宽度系统 ==================== */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    --container-max: 1440px;

    /* ==================== 头部高度系统 ==================== */
    --header-height: 64px;
    --header-height-sm: 56px;
    --top-bar-height: 60px;

    /* ==================== 向后兼容别名 ==================== */
    /* 为 css-components/top-bar.css 等旧组件提供兼容，避免修改其样式 */
    --primary-dark: var(--primary-dark);
    --primary-light: var(--primary-light);
    --border-color: var(--border);
    --bg-light: var(--gray-50);
    --radius-sm: var(--radius-sm);
    --transition-fast: var(--transition-fast);
    --shadow-sm: var(--shadow-sm);
    --shadow-md: var(--shadow-md);
}
