/* ============================================================
   千牛揽收助手 - 统一设计令牌 (Design Tokens)
   所有界面共享此文件，各模块可在自身 :root 中覆盖特定变量
   ============================================================ */

:root {
  /* ---------- 品牌主色 ---------- */
  --color-primary-50:  #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;  /* 主色 */
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;

  --color-primary:         var(--color-primary-600);
  --color-primary-light:   var(--color-primary-500);
  --color-primary-dark:    var(--color-primary-700);
  --color-primary-glow:    rgba(37, 99, 235, 0.15);
  --color-primary-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);

  /* ---------- 语义色 ---------- */
  --color-success: #22c55e;
  --color-success-light: #4ade80;
  --color-success-dark: #16a34a;
  --color-success-bg: rgba(34, 197, 94, 0.1);

  --color-warning: #f59e0b;
  --color-warning-light: #fbbf24;
  --color-warning-dark: #d97706;
  --color-warning-bg: rgba(245, 158, 11, 0.1);

  --color-danger: #ef4444;
  --color-danger-light: #f87171;
  --color-danger-dark: #dc2626;
  --color-danger-bg: rgba(239, 68, 68, 0.1);

  --color-info: #06b6d4;
  --color-info-light: #22d3ee;
  --color-info-dark: #0891b2;
  --color-info-bg: rgba(6, 182, 212, 0.1);

  /* ---------- 中性色阶（浅色主题） ---------- */
  --color-gray-50:  #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;
  --color-gray-950: #020617;

  /* ---------- 圆角 ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ---------- 间距（4px基准） ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- 阴影 ---------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.2);

  /* ---------- 品牌光晕 scale（统一替代分散的 --brand-glow / --premium-*） ---------- */
  --color-primary-glow-sm:   rgba(37, 99, 235, 0.12);
  --color-primary-glow-md:   var(--color-primary-glow);        /* 0.15 */
  --color-primary-glow-lg:   rgba(37, 99, 235, 0.3);
  --radius-pill:             var(--radius-full);

  /* ---------- 字体 ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
               'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;

  --font-size-xs:   12px;
  --font-size-sm:   13px;
  --font-size-base: 14px;   /* 统一基准字号为 14px（合规可读，修正原 13px） */
  --font-size-md:   14px;
  --font-size-lg:   16px;
  --font-size-xl:   18px;
  --font-size-2xl:  20px;
  --font-size-3xl:  24px;
  --font-size-4xl:  30px;

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

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

  /* ---------- 动效 ---------- */
  --duration-fast:   150ms;
  --duration-normal: 200ms;
  --duration-slow:   300ms;
  --duration-slower: 500ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- 层级 ---------- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    1000;
  --z-toast:    1100;
  --z-tooltip:  1200;
}

/* ---------- 深色主题中性色覆盖 ---------- */
[data-theme="dark"] {
  --color-gray-50:  #0f172a;
  --color-gray-100: #1e293b;
  --color-gray-200: #334155;
  --color-gray-300: #475569;
  --color-gray-400: #64748b;
  --color-gray-500: #94a3b8;
  --color-gray-600: #cbd5e1;
  --color-gray-700: #e2e8f0;
  --color-gray-800: #f1f5f9;
  --color-gray-900: #f8fafc;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   兼容别名层（零破坏迁移）
   现有代码大量使用 --primary / --success（无 color- 前缀），
   此处将其指向 --color-* 令牌，旧代码无需改动即可获得统一色值。
   各模块若在自己的 :root 中把 --primary 写成 var(--color-primary)，
   即完成向单一真源的迁移。
   ============================================================ */
:root {
  --primary:          var(--color-primary);
  --primary-light:    var(--color-primary-light);
  --primary-dark:     var(--color-primary-dark);
  --primary-glow:     var(--color-primary-glow);
  --primary-gradient: var(--color-primary-gradient);

  --success:       var(--color-success);
  --success-light: var(--color-success-light);
  --success-dark:  var(--color-success-dark);
  --success-bg:    var(--color-success-bg);

  --warning:       var(--color-warning);
  --warning-light: var(--color-warning-light);
  --warning-dark:  var(--color-warning-dark);
  --warning-bg:    var(--color-warning-bg);

  --danger:       var(--color-danger);
  --danger-light: var(--color-danger-light);
  --danger-dark:  var(--color-danger-dark);
  --danger-bg:    var(--color-danger-bg);

  --info:       var(--color-info);
  --info-light: var(--color-info-light);
  --info-dark:  var(--color-info-dark);
  --info-bg:    var(--color-info-bg);

  /* 兼容官网/app 既有的分散命名，统一归一到品牌令牌（零破坏） */
  --brand:             var(--color-primary);
  --brand-light:       var(--color-primary-light);
  --brand-dark:        var(--color-primary-dark);
  --brand-glow:        var(--color-primary-glow);
  --brand-glow-strong: var(--color-primary-glow-lg);
  --border-accent:     var(--color-primary-glow);
  --gradient-primary:  var(--color-primary-gradient);

  /* 动效别名：官网使用 --transition-*，此处对齐到 duration/ease 令牌 */
  --transition-fast:   var(--duration-fast) var(--ease-default);
  --transition-normal: var(--duration-normal) var(--ease-default);
  --transition-slow:   var(--duration-slow) var(--ease-default);
  --transition-bounce: var(--duration-slow) var(--ease-spring);
}

/* ============================================================
   无障碍基线（全局补齐，管理后台此前完全缺失）
   ============================================================ */
/* 键盘焦点环：所有可聚焦元素统一可见，满足 WCAG 2.4.7 */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 动效降级：尊重系统"减少动态效果"设置，满足 WCAG 2.3.3 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   多色换肤桥接（保留客户端 app 既有换肤能力，但统一驱动 --color-primary）
   仅"亮蓝"等换肤项覆盖品牌色；其余语义色保持统一。
   注意：app 自身的 [data-color] 块仍直接重定义 --primary 作为用户可选强调色，
   此处桥接主要服务于引用 --primary: var(--color-primary) 的模块。
   ============================================================ */
[data-color="blue"]   { --color-primary: #2563eb; --color-primary-light: #3b82f6; --color-primary-dark: #1d4ed8; }
[data-color="indigo"] { --color-primary: #4f46e5; --color-primary-light: #6366f1; --color-primary-dark: #4338ca; }
[data-color="cyan"]   { --color-primary: #0891b2; --color-primary-light: #06b6d4; --color-primary-dark: #0e7490; }
[data-color="green"]  { --color-primary: #16a34a; --color-primary-light: #22c55e; --color-primary-dark: #15803d; }
[data-color="purple"] { --color-primary: #7c3aed; --color-primary-light: #8b5cf6; --color-primary-dark: #6d28d9; }