/**
 * ============================================================================
 *  零一智能 (零一迭代（北京）智能科技有限公司) — Design Tokens
 *  Unified Visual System / 统一视觉系统
 * ----------------------------------------------------------------------------
 *  主色：零一蓝 #1677FF（基于支付宝蓝，稳重 + 科技感）
 *  适用：公司所有前端系统（Web / 桌面 / 移动 / 大屏）
 *  使用：在项目入口引入本文件，业务样式优先引用 var(--token-name)
 *  暗色：为根元素加 class="dark" 或 data-theme="dark" 即可切换
 * ============================================================================
 */

/* ============================ 亮色模式（默认） ============================ */
:root {
  /* ---------- 品牌主色 Brand / Primary · 零一蓝 ---------- */
  --color-primary-50:  #E6F4FF;
  --color-primary-100: #BAE0FF;
  --color-primary-200: #91CAFF;
  --color-primary-300: #69B1FF;
  --color-primary-400: #4096FF;
  --color-primary-500: #1677FF;   /* 主色，按钮 / 主操作 / 品牌标识 */
  --color-primary-600: #0958D9;   /* hover */
  --color-primary-700: #003EB3;   /* active / pressed */
  --color-primary-800: #002C8C;
  --color-primary-900: #001D66;

  /* 品牌色语义别名（业务推荐使用） */
  --color-brand:        var(--color-primary-500);
  --color-brand-hover:  var(--color-primary-600);
  --color-brand-active: var(--color-primary-700);
  --color-brand-bg:     var(--color-primary-50);
  --color-brand-border: var(--color-primary-200);

  /* ---------- 品牌渐变 · AI 科技感 ---------- */
  --gradient-brand:      linear-gradient(135deg, #1677FF 0%, #00B4D8 100%);
  --gradient-brand-deep: linear-gradient(135deg, #0958D9 0%, #0077B6 100%);
  --gradient-brand-soft: linear-gradient(135deg, #E6F4FF 0%, #E0F7FA 100%);

  /* ---------- 中性色 Neutral · 冷灰（带轻微蓝调） ---------- */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F7F9FC;
  --color-neutral-100: #EEF2F7;
  --color-neutral-200: #DDE4ED;
  --color-neutral-300: #C2CCD9;
  --color-neutral-400: #8C9AAB;
  --color-neutral-500: #5C6B7F;
  --color-neutral-600: #3D4D63;
  --color-neutral-700: #2A3849;
  --color-neutral-800: #1A2332;
  --color-neutral-900: #0F1620;

  /* 文本语义 */
  --color-text-primary:   #1A2332;   /* 标题 / 正文主体 */
  --color-text-secondary: #5C6B7F;   /* 次要说明 */
  --color-text-tertiary:  #8C9AAB;   /* 占位 / 辅助 */
  --color-text-disabled:  #C2CCD9;   /* 禁用 */
  --color-text-inverse:   #FFFFFF;   /* 深底反白 */
  --color-text-brand:     #1677FF;   /* 品牌强调文字 */

  /* 背景语义 */
  --color-bg-base:    #F7F9FC;       /* 页面底色 */
  --color-bg-surface: #FFFFFF;       /* 卡片 / 面板 */
  --color-bg-muted:   #EEF2F7;       /* 次级区块 */
  --color-bg-brand:   #E6F4FF;       /* 品牌浅底 */
  --color-bg-overlay: rgba(15, 22, 32, 0.45);

  /* 边框语义 */
  --color-border:        #DDE4ED;    /* 默认描边 */
  --color-border-strong: #C2CCD9;    /* 强调描边 */
  --color-divider:       #EEF2F7;    /* 分隔线 */
  --color-border-brand:  #91CAFF;    /* 品牌描边 */

  /* ---------- 功能色 Functional ---------- */
  --color-success-50:  #F0FBEB;
  --color-success-100: #DCFCB6;
  --color-success-500: #52C41A;
  --color-success-600: #389E0D;

  --color-warning-50:  #FFFBE6;
  --color-warning-100: #FFF1B8;
  --color-warning-500: #FAAD14;
  --color-warning-600: #D48806;

  --color-error-50:  #FFF1F0;
  --color-error-100: #FFCCC7;
  --color-error-500: #FF4D4F;
  --color-error-600: #D9363E;

  --color-info-50:  #E6F4FF;
  --color-info-100: #BAE0FF;
  --color-info-500: #1677FF;
  --color-info-600: #0958D9;

  /* 功能色语义别名 */
  --color-success: var(--color-success-500);
  --color-warning: var(--color-warning-500);
  --color-error:   var(--color-error-500);
  --color-info:    var(--color-info-500);

  /* ---------- 字体 Font ---------- */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-mono: "JetBrains Mono", "Fira Code", "SF Mono", "Cascadia Code", Consolas, "Courier New", 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:  30px;
  --font-size-4xl:  36px;
  --font-size-5xl:  48px;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.2;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;

  /* ---------- 间距 Spacing · 4px 基准网格 ---------- */
  --spacing-0:  0;
  --spacing-1:  4px;
  --spacing-2:  8px;
  --spacing-3:  12px;
  --spacing-4:  16px;
  --spacing-5:  20px;
  --spacing-6:  24px;
  --spacing-8:  32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;

  /* ---------- 圆角 Radius ---------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-base: 4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* ---------- 阴影 Shadow ---------- */
  --shadow-sm:   0 1px 2px rgba(15, 22, 32, 0.06);
  --shadow-base: 0 2px 8px rgba(15, 22, 32, 0.08);
  --shadow-md:   0 4px 12px rgba(15, 22, 32, 0.10);
  --shadow-lg:   0 8px 24px rgba(15, 22, 32, 0.12);
  --shadow-xl:   0 16px 40px rgba(15, 22, 32, 0.16);
  --shadow-brand: 0 4px 12px rgba(22, 119, 255, 0.25);

  /* ---------- 过渡 Transition ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ---------- 层级 z-index ---------- */
  --z-base:     0;
  --z-dropdown: 1000;
  --z-sticky:   1100;
  --z-drawer:   1150;
  --z-modal:    1200;
  --z-toast:    1300;

  /* ---------- 焦点环 Focus Ring ---------- */
  --focus-ring: 0 0 0 2px var(--color-bg-surface), 0 0 0 4px var(--color-primary-400);

  /* ---------- 控件尺寸 ---------- */
  --control-height-sm:   28px;
  --control-height-base: 36px;
  --control-height-lg:   44px;
}

/* ============================ 暗色模式 ============================ */
.dark,
[data-theme="dark"] {
  --color-brand:        #4096FF;
  --color-brand-hover:  #69B1FF;
  --color-brand-active: #1677FF;
  --color-brand-bg:     rgba(22, 119, 255, 0.16);
  --color-brand-border: rgba(64, 150, 255, 0.45);

  --color-text-primary:   #EEF2F7;
  --color-text-secondary: #A8B5C5;
  --color-text-tertiary:  #6B7B90;
  --color-text-disabled:  #3D4D63;
  --color-text-inverse:   #0F1620;
  --color-text-brand:     #4096FF;

  --color-bg-base:    #0F1620;
  --color-bg-surface: #1A2332;
  --color-bg-muted:   #22303F;
  --color-bg-brand:   rgba(22, 119, 255, 0.16);
  --color-bg-overlay: rgba(0, 0, 0, 0.6);

  --color-border:        #2A3849;
  --color-border-strong: #3D4D63;
  --color-divider:       #2A3849;
  --color-border-brand:  rgba(64, 150, 255, 0.5);

  --color-success-500: #73D13D;
  --color-warning-500: #FFC53D;
  --color-error-500:   #FF7875;

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-base: 0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.50);
  --shadow-xl:   0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-brand: 0 4px 12px rgba(64, 150, 255, 0.30);

  --focus-ring: 0 0 0 2px var(--color-bg-surface), 0 0 0 4px var(--color-primary-300);
}