/*
 * 望风Agent - 设计系统
 * 温暖亲和风格 - 设计令牌与变量
 */

/* 字体加载 - 使用国内CDN镜像加速 */
/* 字体加载 - 使用 loli.net 国内镜像加速 */
@import url('https://fonts.loli.net/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root {
  /* ========== 色彩系统 - 温暖亲和 ========== */

  /* 主色调 - 温暖珊瑚橙 */
  --color-primary: #FF6B3D;        /* 活力珊瑚橙 */
  --color-primary-light: #FF8C66;  /* 浅珊瑚橙 */
  --color-primary-dark: #E55529;   /* 深橙色 */
  --color-primary-bg: #FFF4F0;     /* 淡���色背景 */
  --color-primary-border: #FFD4C4; /* 温暖边框 */

  /* 辅助色 - 柔和金黄 */
  --color-secondary: #FFB84D;      /* 温暖金黄 */
  --color-secondary-light: #FFCA75;
  --color-secondary-dark: #F5A623;
  --color-secondary-bg: #FFF9EB;
  --color-secondary-border: #FFE4B3;

  /* 强调色 - 温暖粉色 */
  --color-accent: #FF6B9D;         /* 温暖粉色 */
  --color-accent-light: #FF8CB5;
  --color-accent-dark: #E54F7F;
  --color-accent-bg: #FFF0F6;

  /* 中性色 - 温暖灰调 */
  --color-bg: #FFFAF7;             /* 温暖米白背景 */
  --color-surface: #FFFFFF;        /* 纯白表面 */
  --color-surface-hover: #FFF8F4;  /* 悬浮状态 */
  --color-border: #F0E6E0;         /* 温暖浅灰边框 */
  --color-divider: #E8DDD6;        /* 分隔线 */
  --color-overlay: rgba(61, 46, 40, 0.5); /* 遮罩层 */

  /* 文字颜色 - 温暖深棕 */
  --color-text-primary: #3D2E28;   /* 主要文字 - 温暖深棕 */
  --color-text-secondary: #6B5A51; /* 次要文字 - 中棕 */
  --color-text-tertiary: #9B8A7F;  /* 辅助文字 - 浅棕 */
  --color-text-disabled: #C9BDB5;  /* 禁用文字 */
  --color-text-inverse: #FFFFFF;   /* 反色文字 */

  /* 语义色彩 - 温暖调 */
  --color-success: #52C41A;        /* 成功绿 */
  --color-success-bg: #F6FFED;
  --color-success-border: #B7EB8F;

  --color-warning: #FAAD14;        /* 警告黄 */
  --color-warning-bg: #FFFBE6;
  --color-warning-border: #FFE58F;

  --color-error: #FF4D4F;          /* 错误红 */
  --color-error-bg: #FFF1F0;
  --color-error-border: #FFCCC7;

  --color-info: #40A9FF;           /* 信息蓝 */
  --color-info-bg: #E6F7FF;
  --color-info-border: #91D5FF;

  /* ========== 阴影系统 - 温暖色调 ========== */
  --shadow-xs: 0 1px 4px rgba(255, 107, 61, 0.05);
  --shadow-sm: 0 2px 8px rgba(255, 107, 61, 0.08);
  --shadow-md: 0 4px 16px rgba(255, 107, 61, 0.12);
  --shadow-lg: 0 8px 32px rgba(255, 107, 61, 0.16);
  --shadow-xl: 0 12px 48px rgba(255, 107, 61, 0.20);

  /* 内阴影 */
  --shadow-inner: inset 0 2px 4px rgba(255, 107, 61, 0.08);

  /* ========== 圆角系统 - 大圆角 ========== */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 40px;
  --radius-full: 9999px;

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

  /* ========== 字体系统 ========== */
  --font-family-base: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-display: 'Poppins', 'Noto Sans SC', sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;

  /* 字号 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 40px;
  --font-size-5xl: 48px;

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

  /* 行高 */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ========== 过渡与动画 ========== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

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

  /* ========== 布局 ========== */
  --container-max-width: 1400px;
  --sidebar-width: 260px;
  --navbar-height: 64px;

  /* ========== 补充中性色 ========== */
  --color-bg-secondary: #f8f9fb;

  /* ========== 产品线品牌色 ========== */
  --color-brand-max: #7c3aed;
  --color-brand-max-light: #a855f7;
  --color-brand-max-bg: #faf5ff;
  --color-brand-max-border: #c4b5fd;

  --color-brand-pro: #0ea5e9;
  --color-brand-pro-light: #7dd3fc;
  --color-brand-pro-bg: #f0f9ff;
  --color-brand-pro-border: #bae6fd;

  --color-brand-flash: #2563eb;
  --color-brand-flash-light: #60a5fa;
  --color-brand-flash-bg: #eff6ff;
  --color-brand-flash-border: #93c5fd;

  /* ========== 视频生成工作区主题色（各页面覆盖） ========== */
  --gen-accent: var(--color-primary);
  --gen-accent-light: var(--color-primary-light);
  --gen-accent-bg: var(--color-primary-bg);
  --gen-accent-border: var(--color-primary-border);
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-bg);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ========== 排版 ========== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}

h1 {
  font-size: var(--font-size-4xl);
}

h2 {
  font-size: var(--font-size-3xl);
}

h3 {
  font-size: var(--font-size-2xl);
}

h4 {
  font-size: var(--font-size-xl);
}

h5 {
  font-size: var(--font-size-lg);
}

h6 {
  font-size: var(--font-size-base);
}

p {
  margin-bottom: var(--space-md);
}

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

a:hover {
  color: var(--color-primary-dark);
}

/* ========== 辅助类 ========== */
.text-primary {
  color: var(--color-primary) !important;
}

.text-secondary {
  color: var(--color-text-secondary) !important;
}

.text-muted {
  color: var(--color-text-tertiary) !important;
}

.text-success {
  color: var(--color-success) !important;
}

.text-warning {
  color: var(--color-warning) !important;
}

.text-error {
  color: var(--color-error) !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-bold {
  font-weight: var(--font-weight-bold) !important;
}

.text-semibold {
  font-weight: var(--font-weight-semibold) !important;
}

/* 背景色辅助类 */
.bg-primary {
  background-color: var(--color-primary-bg) !important;
}

.bg-secondary {
  background-color: var(--color-secondary-bg) !important;
}

.bg-success {
  background-color: var(--color-success-bg) !important;
}

.bg-warning {
  background-color: var(--color-warning-bg) !important;
}

.bg-error {
  background-color: var(--color-error-bg) !important;
}

/* 间距辅助类 */
.mt-xs { margin-top: var(--space-xs) !important; }
.mt-sm { margin-top: var(--space-sm) !important; }
.mt-md { margin-top: var(--space-md) !important; }
.mt-lg { margin-top: var(--space-lg) !important; }
.mt-xl { margin-top: var(--space-xl) !important; }

.mb-xs { margin-bottom: var(--space-xs) !important; }
.mb-sm { margin-bottom: var(--space-sm) !important; }
.mb-md { margin-bottom: var(--space-md) !important; }
.mb-lg { margin-bottom: var(--space-lg) !important; }
.mb-xl { margin-bottom: var(--space-xl) !important; }

.pt-xs { padding-top: var(--space-xs) !important; }
.pt-sm { padding-top: var(--space-sm) !important; }
.pt-md { padding-top: var(--space-md) !important; }
.pt-lg { padding-top: var(--space-lg) !important; }
.pt-xl { padding-top: var(--space-xl) !important; }

.pb-xs { padding-bottom: var(--space-xs) !important; }
.pb-sm { padding-bottom: var(--space-sm) !important; }
.pb-md { padding-bottom: var(--space-md) !important; }
.pb-lg { padding-bottom: var(--space-lg) !important; }
.pb-xl { padding-bottom: var(--space-xl) !important; }

/* ========== 容器 ========== */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container-fluid {
  width: 100%;
  padding: 0 var(--space-lg);
}

/* ========== 隐藏辅助类 ========== */
.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ========== 滚动条样式 - 美化 ========== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-divider);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}

* {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--color-divider) transparent;
}

/* ========== 选择文本样式 ========== */
::selection {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

::-moz-selection {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}