/* =============================================================
   Design Token —— 唯一色值/尺寸来源
   分层：原始层 Primitive → 语义层 Semantic → 组件层 Component
   规则：业务代码只允许引用语义层；组件层只引用语义层
   ============================================================= */

:root {
  /* ---------- 原始层 Primitive（禁止业务代码直接引用） ---------- */
  /* 蓝色梯度（取自主品牌 Logo 蓝） */
  --blue-200: #8fc4ff;
  --blue-300: #5aa9ff;
  --blue-400: #3190f5;
  --blue-500: #1877e8;
  --blue-600: #0f5fc4;
  --blue-700: #0b4a9b;

  /* 中性梯度（暗黑底） */
  --gray-950: #06090f;
  --gray-900: #0a0f17;
  --gray-850: #0e141e;
  --gray-800: #121926;
  --gray-750: #17202f;
  --gray-700: #1c2534;
  --gray-600: #2a3547;
  --gray-500: #3d4a60;

  /* 文字梯度 */
  --ink-50:  #f2f6fc;
  --ink-100: #dde6f2;
  --ink-300: #9fb0c8;
  --ink-500: #6f809a;

  /* 功能色 */
  --green-400: #3ddc97;
  --red-400:   #ff6b6b;
  --amber-400: #ffc857;

  /* 字体栈 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono",
    Menlo, monospace;

  /* 字号梯度 */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 40px;
  --fs-4xl: 56px;

  /* 间距（8px 栅格体系：8/16/24/32/40 及倍数，硬性标准） */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-7: 56px;
  --sp-8: 64px;
  --sp-10: 80px;

  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* 层级 z-index */
  --z-content: 10;
  --z-header: 100;
  --z-drawer: 110;
  --z-overlay: 120;
  --z-toast: 130;
  --z-cursor: 90;

  /* 渐变 */
  --grad-brand: linear-gradient(135deg, #3190f5, #0f5fc4);
  --grad-hero: radial-gradient(60% 60% at 50% 40%, rgba(24, 119, 232, .22), transparent 70%);
  --grad-band: linear-gradient(90deg, transparent, rgba(49, 144, 245, .6), transparent);

  /* ---------- 语义层 Semantic（组件只允许引用这一层） ---------- */
  --color-bg: #06090f;
  --color-bg-alt: #0a0f17;
  --color-surface: #0e141e;
  --color-surface-2: #121926;
  --color-surface-hover: #17202f;
  --color-border: #1c2534;
  --color-border-strong: #2a3547;

  --color-brand: #1877e8;
  --color-brand-strong: #3190f5;
  --color-brand-soft: rgba(24, 119, 232, .14);

  --color-text: #dde6f2;
  --color-text-strong: #f2f6fc;
  --color-text-muted: #9fb0c8;
  --color-text-faint: #6f809a;
  --color-text-on-brand: #ffffff;

  --color-success: #3ddc97;
  --color-error: #ff6b6b;
  --color-warning: #ffc857;
  --color-info: #5aa9ff;

  /* 表单/页脚补充语义（组件层引用） */
  --color-danger: var(--color-error);
  --danger-soft: rgba(255, 107, 107, 0.14);
  --color-bg-elevated: var(--gray-850);
  --grad-footer: linear-gradient(180deg, var(--color-bg-alt), var(--color-bg));

  /* 业务专属光效 Token（三业务 Hero 区分） */
  --color-service-vibe: #3190f5;
  --color-service-transform: #7c5cff;
  --color-service-agent: #17c1c1;

  /* 辉光强度三档：sm=卡片 hover / md=按钮 / lg=Hero */
  --glow-sm: 0 0 0 1px rgba(49, 144, 245, .35), 0 8px 32px rgba(24, 119, 232, .18);
  --glow-md: 0 6px 28px rgba(24, 119, 232, .38);
  --glow-lg: 0 0 120px rgba(24, 119, 232, .35), 0 0 240px rgba(24, 119, 232, .16);
  --focus-ring: 0 0 0 3px rgba(49, 144, 245, .55);

  /* 布局与动效 */
  --container: 1200px;
  --container-wide: 1320px;
  --nav-h: 64px;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 150ms;
  --dur: 240ms;
  --dur-slow: 300ms;

  /* ---------- 组件层 Component（仅引用语义层） ---------- */
  --btn-primary-bg: var(--color-brand);
  --btn-primary-bg-hover: var(--color-brand-strong);
  --btn-radius: var(--radius-full);
  --card-bg: var(--color-surface);
  --card-border: 1px solid var(--color-border);
  --input-bg: var(--color-surface-2);
  --input-border: 1px solid var(--color-border-strong);
}