/* ============================================================
   微信小店多店铺管理台 · Design Tokens
   版本 1.0 · 2026-10-25
   唯一来源：本文件。组件样式不得再写死颜色/间距/字号。
   ============================================================ */

:root {
  /* ---------- 01 品牌色阶（Blue / 操作与选中） ---------- */
  --ds-blue-50: #eff6ff;
  --ds-blue-100: #dbeafe;
  --ds-blue-200: #bfdbfe;
  --ds-blue-300: #93c5fd;
  --ds-blue-400: #60a5fa;
  --ds-blue-500: #3b82f6;
  --ds-blue-600: #2563eb; /* 品牌主色：按钮、链接、选中 */
  --ds-blue-700: #1d4ed8; /* hover / active */
  --ds-blue-800: #1e40af;
  --ds-blue-900: #1e3a8a;

  /* ---------- 02 中性色阶（冷调灰 / 结构与文字） ---------- */
  --ds-ink-0: #ffffff;
  --ds-ink-25: #fbfcfe; /* 表格斑马、极浅底 */
  --ds-ink-50: #f6f7fb; /* 页面底 */
  --ds-ink-100: #eef1f6; /* 区块底、hover */
  --ds-ink-200: #e5e7eb; /* 主细线 */
  --ds-ink-300: #d3d9e2; /* 强细线、禁用描边 */
  --ds-ink-400: #9aa4b2; /* 仅图标/占位/分隔，禁用于正文 */
  --ds-ink-500: #6b7280; /* 次要文字 */
  --ds-ink-600: #4b5563;
  --ds-ink-700: #374151;
  --ds-ink-800: #1f2329; /* 正文 */
  --ds-ink-900: #111418; /* 标题 */

  /* ---------- 03 语义色（每个都给出 bg / border / text / solid 四档） ---------- */
  --ds-success-bg: #f0fdf4;
  --ds-success-border: #bbf7d0;
  --ds-success-text: #15803d;
  --ds-success-solid: #16a34a;

  --ds-warning-bg: #fffbeb;
  --ds-warning-border: #fde68a;
  --ds-warning-text: #b45309;
  --ds-warning-solid: #f59e0b;

  --ds-danger-bg: #fef2f2;
  --ds-danger-border: #fecaca;
  --ds-danger-text: #b91c1c;
  --ds-danger-solid: #dc2626;

  --ds-info-bg: var(--ds-blue-50);
  --ds-info-border: var(--ds-blue-200);
  --ds-info-text: var(--ds-blue-700);
  --ds-info-solid: var(--ds-blue-600);

  /* ---------- 04 语义别名（组件只用这一层） ---------- */
  --ds-bg-page: var(--ds-ink-50);
  --ds-bg-surface: var(--ds-ink-0);
  --ds-bg-subtle: var(--ds-ink-25);
  --ds-bg-hover: var(--ds-ink-100);
  --ds-border-default: var(--ds-ink-200);
  --ds-border-strong: var(--ds-ink-300);
  --ds-text-primary: var(--ds-ink-800);
  --ds-text-title: var(--ds-ink-900);
  --ds-text-secondary: var(--ds-ink-500);
  --ds-text-disabled: var(--ds-ink-400);
  --ds-text-inverse: #ffffff;
  --ds-focus-ring: rgba(37, 99, 235, 0.35);

  /* ---------- 05 字体 ---------- */
  --ds-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --ds-text-2xs: 11px;   /* 徽标、图表轴 */
  --ds-text-xs: 12px;    /* 辅助说明、表头 */
  --ds-text-sm: 13px;    /* 表格正文、按钮 */
  --ds-text-base: 14px;  /* 正文 */
  --ds-text-md: 16px;    /* 区块标题 */
  --ds-text-lg: 20px;    /* 页面标题 */
  --ds-text-xl: 24px;    /* KPI 小 */
  --ds-text-2xl: 28px;   /* KPI 主 */
  --ds-text-3xl: 34px;   /* 关键单值 */

  --ds-leading-tight: 1.25;
  --ds-leading-snug: 1.45;
  --ds-leading-normal: 1.6;
  --ds-leading-relaxed: 1.8;

  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;

  --ds-tracking-label: 0.04em; /* 小号全大写/表头字距 */
  --ds-tracking-num: -0.01em;  /* 大数字收紧 */

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

  /* ---------- 07 圆角 ---------- */
  --ds-radius-xs: 4px;   /* 标签、徽标 */
  --ds-radius-sm: 6px;   /* 输入、按钮 */
  --ds-radius-md: 10px;  /* 卡片 */
  --ds-radius-lg: 14px;  /* 弹窗、大区块 */
  --ds-radius-pill: 999px;

  /* ---------- 08 描边与阴影 ---------- */
  --ds-hairline: 1px solid var(--ds-border-default);
  --ds-shadow-none: none;
  --ds-shadow-xs: 0 1px 2px rgba(17, 20, 24, 0.04);
  --ds-shadow-sm: 0 2px 8px rgba(17, 20, 24, 0.06);
  --ds-shadow-md: 0 8px 24px rgba(17, 20, 24, 0.10);
  --ds-shadow-lg: 0 18px 48px rgba(17, 20, 24, 0.16);

  /* ---------- 09 动效 ---------- */
  --ds-duration-fast: 120ms;
  --ds-duration-base: 180ms;
  --ds-duration-slow: 260ms;
  --ds-ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* ease-out-quart */
  --ds-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- 10 尺寸（控件与行高的密度规范） ---------- */
  --ds-control-sm: 28px;
  --ds-control-md: 34px;
  --ds-control-lg: 40px;
  --ds-row-compact: 40px;
  --ds-row-default: 48px;
  --ds-sidebar-w: 208px;
  --ds-content-max: 1440px;

  /* ---------- 11 层级 ---------- */
  --ds-z-sticky: 10;
  --ds-z-dropdown: 20;
  --ds-z-modal: 50;
  --ds-z-toast: 90;

  /* ============================================================
     12 兼容层：旧变量映射
     现有 styles.css 直接读这些名字，改这里即可全站生效。
     新代码请直接用 --ds-*。
     ============================================================ */
  --bg: var(--ds-bg-page);
  --card: var(--ds-bg-surface);
  --text: var(--ds-text-primary);
  --muted: var(--ds-text-secondary);
  --border: var(--ds-border-default);
  --primary: var(--ds-blue-600);
  --primary-dark: var(--ds-blue-700);
  --green: var(--ds-success-solid);
  --red: var(--ds-danger-solid);
  --amber: var(--ds-warning-solid);
}

/* 深色模式预留：只换语义层，组件零改动 */
[data-theme="dark"] {
  --ds-bg-page: #0f1216;
  --ds-bg-surface: #161b22;
  --ds-bg-subtle: #1b2129;
  --ds-bg-hover: #222a35;
  --ds-border-default: #2a323d;
  --ds-border-strong: #3a4450;
  --ds-text-primary: #e6e9ef;
  --ds-text-title: #f5f7fa;
  --ds-text-secondary: #9aa4b2;
  --ds-text-disabled: #5f6b7a;
  --ds-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --ds-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   13 基础排版规则
   ============================================================ */
.ds-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: var(--ds-tracking-num);
}

.ds-label {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text-secondary);
  letter-spacing: var(--ds-tracking-label);
}

.ds-hairline-t { border-top: var(--ds-hairline); }
.ds-hairline-b { border-bottom: var(--ds-hairline); }

/* 键盘焦点：始终可见，不依赖浏览器默认 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ds-blue-600);
  outline-offset: 2px;
  border-radius: var(--ds-radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}