/*
 * ============================================================
 * ftf-tokens.css — 外贸端前台设计令牌（Foreign-Trade Front Tokens）
 * 规范：docs/14_外贸系统/第二阶段/外贸端前台UI设计规范_v0.1.md §1.1
 * 状态：T1 已实现（2026-08-08）
 * 说明：镜像后台 --adm-* 体系，前缀 --ftf-*，前后台视觉同源。
 *       所有外贸前台页面样式必须引用这些变量，禁止散落魔数。
 * ============================================================
 */
:root {
  /* ===== 品牌色（与后台一致，工业蓝） ===== */
  --ftf-primary: #1677ff;
  --ftf-primary-hover: #4096ff;
  --ftf-primary-active: #0958d9;
  --ftf-primary-bg: #e8f1ff;        /* 主色浅底（选中/标签底） */
  --ftf-link: var(--ftf-primary);

  /* ===== 中性色 ===== */
  --ftf-bg: #ffffff;                /* 页面主底 */
  --ftf-bg-gray: #f5f7fb;           /* 次级底（页脚/分区） */
  --ftf-text: #0f172a;              /* 主文字 */
  --ftf-text-secondary: #475569;    /* 次级文字 */
  --ftf-text-muted: #94a3b8;        /* 弱提示 */
  --ftf-border: #e5e7eb;            /* 常规边框 */
  --ftf-border-strong: #d1d5db;     /* 强边框/输入框 */

  /* ===== 状态色（与后台一致） ===== */
  --ftf-success: #16a34a;
  --ftf-warning: #f59e0b;
  --ftf-error: #ef4444;
  --ftf-success-bg: #f0fdf4;
  --ftf-warning-bg: #fffbeb;
  --ftf-error-bg: #fef2f2;

  /* ===== 字体（B2B 专业排版，比 C 端更克制） ===== */
  --ftf-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ftf-font-size-xs: 12px;
  --ftf-font-size-sm: 13px;
  --ftf-font-size-base: 14px;       /* 正文基准 */
  --ftf-font-size-lg: 16px;
  --ftf-font-size-xl: 18px;
  --ftf-font-size-h3: 20px;
  --ftf-font-size-h2: 24px;
  --ftf-font-size-h1: 32px;
  --ftf-font-size-hero: 40px;       /* 首页 Hero 大标题 */
  --ftf-line-height: 1.6;
  --ftf-font-weight-strong: 600;

  /* ===== 间距阶梯（8px 基准） ===== */
  --ftf-space-1: 4px;
  --ftf-space-2: 8px;
  --ftf-space-3: 12px;
  --ftf-space-4: 16px;
  --ftf-space-5: 24px;
  --ftf-space-6: 32px;
  --ftf-space-7: 48px;
  --ftf-space-8: 64px;

  /* ===== 圆角 / 阴影 ===== */
  --ftf-radius: 10px;
  --ftf-radius-sm: 6px;
  --ftf-radius-lg: 14px;
  --ftf-radius-round: 999px;
  --ftf-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --ftf-shadow-card: 0 2px 12px rgba(15, 23, 42, 0.08);
  --ftf-shadow-pop: 0 12px 30px rgba(15, 23, 42, 0.14);

  /* ===== 容器 ===== */
  --ftf-container: 1200px;          /* 外贸 PC 内容区宽度 */
  --ftf-header-height: 64px;
}

/* ===== 容器工具（页面骨架） ===== */
.ftf-container {
  width: 100%;
  max-width: var(--ftf-container);
  margin: 0 auto;
  padding: 0 var(--ftf-space-4);
}

/* ===== 基础重置（仅作用于外贸前台域，避免污染后台） ===== */
.ftf-body {
  margin: 0;
  font-family: var(--ftf-font-family);
  font-size: var(--ftf-font-size-base);
  line-height: var(--ftf-line-height);
  color: var(--ftf-text);
  background: var(--ftf-bg);
  -webkit-font-smoothing: antialiased;
}

.ftf-body *,
.ftf-body *::before,
.ftf-body *::after {
  box-sizing: border-box;
}

/* ===== 图片 ===== */
.ftf-img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ===== RTL 基础（阿拉伯语镜像） ===== */
[dir="rtl"] .ftf-body {
  text-align: right;
}