/* ============================================================
   泰创跨境 OZON ERP — Design Token System（泰创蓝值版）
   「翡翠年报 Emerald Ledger」结构 + 泰创蓝值（2026-08-19）
   来源：企业主页设计稿-v3 + 后台设计稿-v1 + 登录/注册稿-v1（主任定稿）
   命名体系：--emerald-* / --gold-* / --ivory-* / --ink-* / --line-*（名副其实）
   三层结构：Primitive 原子层 → Semantic 语义层 → --c-* 组件语义层
   换肤铁律：只改 Primitive 原子层，语义层与页面全部自动跟随
   使用方式：index.html 中 <link rel="stylesheet" href="/tokens.css">（admin.css 前）
   ============================================================ */

/* 衬线标题字体（Noto Serif SC 子集自托管，晨晨 8/17 生成） */
@font-face{
  font-family:"Noto Serif SC";
  src:url("/fonts/NotoSerifSC-subset.woff2") format("woff2");
  font-weight:200 900;
  font-style:normal;
  font-display:swap;
}

:root {
  /* ═══════════ Primitive 原子层（唯一色值来源） ═══════════ */

  /* 泰创蓝 emerald（品牌色阶，1.25 major-third） */
  --emerald-950: #0D1B4E;   /* 页脚极深 */
  --emerald-900: #13265C;   /* 深蓝底（侧栏/账脊） */
  --emerald-800: #1A3A8A;   /* 主品牌色 */
  --emerald-700: #2456B8;   /* hover 态 */
  --emerald-600: #409EFF;   /* 主色浅阶（EP 组件蓝对应） */
  --emerald-500: #66B1FF;
  --emerald-400: #8EC5FF;
  --emerald-300: #B3D9FF;
  --emerald-200: #D9ECFF;
  --emerald-100: #ECF5FF;   /* 浅绿底 */
  --emerald-50:  #F5FAFF;   /* 极浅绿底 */

  /* 香槟金 gold（细线/点缀专用） */
  --gold-500: #C9A227;
  --gold-300: #E3C566;

  /* 象牙 ivory（中性浅底） */
  --ivory-0: #FDFCFA;   /* 页面底/白卡 */
  --ivory-1: #F7F5F0;   /* 章节交替 */
  --ivory-2: #F1EEE7;   /* 次级底 */

  /* 暖墨 ink（中性文字） */
  --ink-900: #1F1D1A;   /* 标题 */
  --ink-600: #57534E;   /* 正文 */
  --ink-400: #8A8580;   /* 次要文字 */
  --ink-300: #A8A29E;   /* 占位/禁用 */
  --ink-200: #B9B3A9;   /* placeholder */

  /* 细线 line */
  --line-1: #E4E0D8;    /* 浅底细线 */
  --line-2: #D9D4C9;    /* 强调细线 */
  --line-3: #C9C2B5;    /* 输入框边框 */

  /* 语义色 */
  --pos-600: #0E8A6D;   /* 增长绿 */
  --neg-600: #B4543F;   /* 跌/异常红（替代刺眼红） */
  --rise:    #3FBF9A;   /* 汇率涨色 */
  --neg-text:#8C3B2E;   /* 深红文字（表单内联错误） */

  /* 深底象牙文字 + 表面 */
  --on-brand:       #F4EFE6;
  --on-brand-muted: rgba(244,239,230,.62);
  --surface:        #fff;

  /* rgb 分量（半透明态用） */
  --neg-rgb:  180,84,63;
  --gold-rgb: 201,162,39;
  --pos-rgb:  14,138,109;

  /* ═══════════ Semantic 语义层 ═══════════ */
  --brand:      var(--emerald-800);
  --brand-deep: var(--emerald-900);
  --accent-line:var(--gold-500);

  /* ═══════════ --c-* 组件语义层（admin.css/CaijiBox 引用） ═══════════ */
  --c-brand:         var(--emerald-800);
  --c-brand-deep:    var(--emerald-900);
  --c-brand-ep:      var(--emerald-600);
  --c-brand-soft:    var(--emerald-50);
  --c-brand-soft-act:var(--emerald-100);
  --c-brand-strong:  var(--emerald-800);
  --c-brand-soft-text:var(--emerald-600);
  --c-brand-tint:    var(--emerald-50);
  --c-brand-tint-2:  var(--emerald-100);
  --c-text-strong:   var(--ink-900);
  --c-text-main:     var(--ink-600);
  --c-text-sub:      var(--ink-400);
  --c-text-faint:    var(--ink-300);
  --c-text-dark:     var(--ink-900);
  --c-text-mid:      var(--ink-600);
  --c-text-light:    var(--ink-400);
  --c-text-deep:     var(--ink-900);
  --c-text-muted:    var(--ink-400);
  --c-bg-page:       var(--ivory-1);
  --c-bg-subtle:     var(--ivory-2);
  --c-bg-card:       var(--ivory-0);
  --c-bg-table:      var(--ivory-0);
  --c-bg-soft-blue:  var(--emerald-50);
  --c-bg-soft-ivory: var(--line-1);
  --c-bg-muted:      var(--ivory-2);
  --c-bg-blue:       var(--ivory-2);
  --c-bg-tint:       var(--emerald-50);
  --c-bg-interested: #FDF7EC;   /* 跟卖意向暖底（独立） */
  --c-line:          var(--line-1);
  --c-line-strong:   var(--line-2);
  --c-line-input:    var(--line-3);
  --c-line-faint:    var(--line-1);
  --c-line-softer:   var(--ivory-2);
  --c-line-mid:      var(--line-1);
  --c-line-soft:     var(--line-1);
  --c-sidebar-bg:    var(--emerald-900);
  --c-sidebar-bg-2:  var(--emerald-800);
  --c-danger:        var(--neg-600);
  --c-danger-soft:   rgba(var(--neg-rgb),.08);
  --c-danger-soft-2: rgba(var(--neg-rgb),.14);
  --c-warning:       var(--gold-500);
  --c-warning-soft:  rgba(var(--gold-rgb),.1);
  --c-warning-line:  rgba(var(--gold-rgb),.22);
  --c-success:       var(--pos-600);
  --c-success-soft:  rgba(var(--pos-rgb),.1);
  --c-success-soft-bg: rgba(var(--pos-rgb),.08);
  --c-surface:       var(--surface);
  --c-placeholder:   var(--ink-200);
  --c-rise:          var(--rise);
  --c-danger-text:   var(--neg-text);
  --c-brand-rgb:     26,58,138;
  --c-brand-ep-rgb:  64,158,255;
  --c-brand-deep-rgb:19,38,92;

  /* ═══════════ Type 排版层级（1.25 major third） ═══════════ */
  --fs-display: clamp(38px,5.2vw,62px);
  --fs-h2:      clamp(28px,3.4vw,40px);
  --fs-h3:      19px;
  --fs-body:    16px;
  --fs-small:   13.5px;
  --fs-caption: 12px;
  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  14px;
  --text-md:    15px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   22px;
  --text-3xl:   28px;

  /* ═══════════ 圆角（编辑风：克制小圆角） ═══════════ */
  --r-s: 3px;
  --r-m: 6px;
  --radius-sm:   6px;
  --radius-base: 8px;
  --radius-md:  10px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* ═══════════ 阴影 ═══════════ */
  --shadow-sm: 0 1px 3px rgba(4,27,20,0.05), 0 1px 8px rgba(4,27,20,0.06);
  --shadow-md: 0 4px 12px rgba(4,27,20,0.07), 0 12px 28px rgba(4,27,20,0.07);
  --shadow-lg: 0 8px 24px rgba(4,27,20,0.09), 0 24px 56px rgba(4,27,20,0.10);

  /* ═══════════ 间距（8px 栅格） ═══════════ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ═══════════ 布局 ═══════════ */
  --sidebar-width: 232px;
  --topbar-height: 52px;
  --content-padding: 26px 30px;

  /* ═══════════ 过渡 ═══════════ */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --ease: cubic-bezier(.22,.61,.2,1);

  /* ═══════════ 字体 ═══════════ */
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "STZhongsong", "SimSun", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, ui-monospace, monospace;

  /* ═══════════ Element Plus 主题覆盖（翡翠） ═══════════ */
  --el-color-primary: var(--emerald-800);
  --el-color-primary-light-3: var(--emerald-600);
  --el-color-primary-light-5: var(--emerald-500);
  --el-color-primary-light-7: var(--emerald-300);
  --el-color-primary-light-8: var(--emerald-200);
  --el-color-primary-light-9: var(--emerald-50);
  --el-color-success: var(--pos-600);
  --el-color-warning: var(--gold-500);
  --el-color-danger: var(--neg-600);
  --el-border-radius-base: var(--radius-base);
  --el-border-radius-small: var(--radius-sm);
}

/* ═══════════ 全局基础（翡翠纸面） ═══════════ */
body {
  font-family: var(--font-sans);
  background: var(--ivory-1);
  color: var(--ink-600);
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
}

/* 数字等宽（价格/销量/汇率/货号） */
.num, .num * {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* 无障碍：跳转到主内容 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--emerald-800);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  z-index: 9999;
}
.skip-link:focus {
  left: 0;
  outline: none;
}

/* 焦点可见性（WCAG 2.4.7，金线） */
*:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

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