/* ============================================================
 * 设计令牌 — Tailwind CSS v4 @theme 扩展 + 亮暗 CSS 变量
 *
 * 与 tokens.ts / antd-theme.ts 保持同步。
 * 改颜色 → 改这个文件。
 * ============================================================ */

/* ============================================================
 * Tailwind CSS v4 主题扩展（@theme 指令）
 * 此处定义的自定义令牌会自动生成对应的 Tailwind 工具类。
 * 例如：colors.primary → bg-primary, text-primary, border-primary 等。
 * ============================================================ */

/* 品牌色 — 蓝紫渐变 */
@theme {
   /* 主色系 */
   --color-primary: #6366f1; /* Indigo-500 */
   --color-primary-light: #818cf8; /* Indigo-400 */
   --color-primary-dark: #4f46e5; /* Indigo-600 */
   --color-primary-50: #eef2ff; /* Indigo-50 */
   --color-primary-100: #e0e7ff; /* Indigo-100 */
   --color-primary-200: #c7d2fe; /* Indigo-200 */
   --color-primary-300: #a5b4fc; /* Indigo-300 */
   --color-primary-400: #818cf8; /* Indigo-400 */
   --color-primary-500: #6366f1; /* Indigo-500 */
   --color-primary-600: #4f46e5; /* Indigo-600 */
   --color-primary-700: #4338ca; /* Indigo-700 */
   --color-primary-800: #3730a3; /* Indigo-800 */
   --color-primary-900: #312e81; /* Indigo-900 */

   /* 辅助色系 — Violet */
   --color-secondary: #8b5cf6; /* Violet-500 */
   --color-secondary-light: #a78bfa; /* Violet-400 */
   --color-secondary-dark: #7c3aed; /* Violet-600 */

   /* 功能色 */
   --color-success: #10b981;
   --color-success-light: #d1fae5;
   --color-warning: #f59e0b;
   --color-warning-light: #fef3c7;
   --color-error: #ef4444;
   --color-error-light: #fee2e2;
   --color-info: #3b82f6;
   --color-info-light: #dbeafe;

   /* 圆角 */
   --radius-xs: 4px;
   --radius-sm: 6px;
   --radius-base: 8px;
   --radius-lg: 12px;
   --radius-xl: 16px;
   --radius-2xl: 24px;

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

   /* 动画 */
   --transition-duration: 0.2s;
   --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
 * 🌞 亮色模式 CSS 变量（默认）
 * 这些变量与 tokens.ts 中的亮色令牌同步
 * ============================================================ */

:root,
[data-theme='light'] {
   /* 中性色 — 亮色 */
   --color-text-base: #1e1b4b;
   --color-text-secondary: #6b7280;
   --color-text-tertiary: #9ca3af;
   --color-bg-base: #ffffff;
   --color-bg-container: #f9fafb;
   --color-bg-layout: #f5f3ff;
   --color-bg-elevated: #ffffff;
   --color-border-base: #e5e7eb;
   --color-border-secondary: #f3f4f6;

   /* 阴影 */
   --shadow-base: 0 1px 3px 0 rgba(99, 102, 241, 0.08), 0 1px 2px -1px rgba(99, 102, 241, 0.08);
   --shadow-lg: 0 10px 15px -3px rgba(99, 102, 241, 0.1), 0 4px 6px -4px rgba(99, 102, 241, 0.1);
}

/* ============================================================
 * 🌙 暗色模式 CSS 变量
 * 当 <html data-theme="dark"> 时自动切换
 * 这些变量与 tokens.ts 中的暗色令牌同步
 * ============================================================ */

[data-theme='dark'] {
   /* 中性色 — 暗色（科技蓝紫） */
   --color-text-base: #e8e8fa;
   --color-text-secondary: #a0a8d8;
   --color-text-tertiary: #6e78b0;
   --color-bg-base: #a0a8d8;
   --color-bg-container: #0f1340;
   --color-bg-layout: #a0a8d8;
   --color-bg-elevated: #171b52;
   --color-border-base: #2a3278;
   --color-border-secondary: #1c2250;

   /* 暗色模式下品牌色提亮以保持对比度 */
   --color-primary: #818cf8;
   --color-primary-light: #a5b4fc;
   --color-primary-dark: #6366f1;

   /* 阴影 — 暗色下用深投影 */
   --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
}

/* ============================================================
 * 蓝紫渐变工具类
 * Tailwind v4 使用 @utility 定义自定义工具类
 * ============================================================ */

@utility gradient-primary {
   background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

@utility gradient-primary-hover {
   background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

@utility gradient-primary-text {
   background: linear-gradient(135deg, #4f46e5, #7c3aed);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

@utility gradient-border {
   border-image: linear-gradient(135deg, #4f46e5, #7c3aed) 1;
}
