/* ============================================================
   Octo 共享组件层 · shared/components.css  v1.0.0
   ------------------------------------------------------------
   定位：TDesign 三层令牌之第二层（组件 token 引用基础 token）
   依赖：必须先引 shared/tokens-ai.css（ai 皮肤唯一真源）+ shared/xuan-theme.css（字体族）
   门禁：H2 零阴影 · H8 无裸 hex（全部走 var） · 圆角仅 8/12/18/999
        · H13 不重定义 --x-* / --ink-* / --paper-* 等保留命名空间
   新增命名空间：--oc-*（Octo Component），仅本层使用
   对比度：全部组合按 WCAG 2.1 相对亮度公式实测，文本 ≥4.5:1，非文本 ≥3:1
   ============================================================ */

/* ---------- 组件级令牌 ---------- */
:root{
  /* 文本：ink-700 = 8.47:1，替代仅 3.76:1 的 ink-500 作次要文本 */
  --oc-text:        var(--ink-900);
  --oc-text-muted:  var(--ink-700);
  --oc-text-invert: var(--paper);

  /* 边界：ink-500 = 3.76:1，达 WCAG 1.4.11 非文本 3:1；hair-soft 仅作装饰分隔 */
  --oc-line:        var(--ink-500);
  --oc-line-soft:   var(--hair-soft);

  /* 面：三级纸色，零阴影靠色阶分层 */
  --oc-surface:     var(--paper);
  --oc-surface-2:   var(--paper-2);
  --oc-surface-3:   var(--paper-3);

  /* 动作色：abyss-700 承白字 10.6:1；berry-700 承白字 5.78:1、压纸面 5.01:1
     （berry-500 承白字仅 2.91:1，故只作装饰，不作文字底） */
  --oc-action:        var(--abyss-700);
  --oc-action-hover:  var(--abyss-600);
  --oc-accent:        var(--berry-700);
  --oc-gold:          var(--gold);

  /* 尺寸：4px 栅格，触控下限 44px（Apple 44pt / Material 48dp 取交集） */
  --oc-h:      44px;
  --oc-h-lg:   48px;
  --oc-h-sm:   32px;
  --oc-pad-x:  20px;
  --oc-gap:    16px;

  /* 圆角：仅 8 / 12 / 18 / 999 */
  --oc-r:       12px;
  --oc-r-lg:    18px;
  --oc-r-sm:    8px;
  --oc-r-pill:  999px;

  /* 动效 */
  --oc-dur:  200ms;
  --oc-ease: cubic-bezier(.22,1,.36,1);

  /* 层级：全站常量表（替代当前 40 个散值）
     内容 10 / 悬浮 50 / 侧栏 900 / 面板 1000 / 遮罩 1100 / Toast 1200 / 引导 1300
     站外：底部导航 9000 · 纸纹 9999（禁止 10000+） */
  --oc-z-float:  50;
  --oc-z-sheet:  900;
  --oc-z-panel:  1000;
  --oc-z-mask:   1100;
  --oc-z-toast:  1200;
  --oc-z-guide:  1300;
}

/* ---------- 全局兜底：焦点（ai-chat 做法回流全站） ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--oc-action);
  outline-offset: 2px;
}

/* ---------- 全局兜底：热区外扩（视觉可纤细，点击必须 44） ---------- */
.oc-tap{ position: relative; }
.oc-tap::after{
  content: '';
  position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}

/* ============================================================
   Button · .btn
   变体：default / .btn--primary / .btn--accent / .btn--gold / .btn--ghost
   尺寸：.btn--sm / .btn--lg / .btn--block
   状态：hover / active / focus-visible / disabled / .is-loading / .is-error
   ============================================================ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--oc-h);
  padding: 0 var(--oc-pad-x);
  border: 1px solid transparent;
  border-radius: var(--oc-r-pill);
  background: var(--oc-surface-2);
  color: var(--oc-text);
  font-family: var(--x-font-sans, inherit);
  font-size: var(--fs-14, 14px);
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--oc-dur) ease,
              color var(--oc-dur) ease,
              border-color var(--oc-dur) ease,
              transform 150ms ease;
}
.btn:hover{ border-color: var(--oc-line); }
.btn:active{ transform: scale(.975); }
.btn:focus-visible{ outline: 2px solid var(--oc-action); outline-offset: 2px; }

/* 主行动：深海绿承白字 10.6:1 */
.btn--primary{
  background: var(--oc-action);
  border-color: var(--oc-action);
  color: var(--oc-text-invert);
}
.btn--primary:hover{ background: var(--oc-action-hover); border-color: var(--oc-action-hover); }

/* 强调：莓酱 700 承白字 5.78:1 */
.btn--accent{
  background: var(--oc-accent);
  border-color: var(--oc-accent);
  color: var(--oc-text-invert);
}
.btn--accent:hover{ filter: brightness(1.08); }

/* 金印：金底承墨字 5.29:1（金仅印章与强调，不作正文） */
.btn--gold{
  background: var(--oc-gold);
  border-color: var(--oc-gold);
  color: var(--ink-900);
}
.btn--gold:hover{ filter: brightness(1.05); }

/* 次要：透明底 + 实边界（3.76:1，可见而非装饰） */
.btn--ghost{
  background: transparent;
  border-color: var(--oc-line);
  color: var(--oc-text);
}
.btn--ghost:hover{ border-color: var(--oc-action); color: var(--oc-action); }

/* 尺寸 */
.btn--sm{ min-height: var(--oc-h-sm); padding: 0 12px; font-size: var(--fs-12, 12px); }
.btn--lg{ min-height: var(--oc-h-lg); padding: 0 24px; font-size: var(--fs-16, 16px); }
.btn--block{ display: flex; width: 100%; }

/* 点式变体别名：兼容全站既有的 .btn.primary / .btn.ghost / .btn.gold / .btn.main 写法
   （全仓 17 页自定义按钮中多数用点式，迁移时可只删样式、不动 HTML 类名） */
.btn.primary{
  background: var(--oc-action);
  border-color: var(--oc-action);
  color: var(--oc-text-invert);
}
.btn.primary:hover{ background: var(--oc-action-hover); border-color: var(--oc-action-hover); }
.btn.ghost{
  background: transparent;
  border-color: var(--oc-line);
  color: var(--oc-text);
}
.btn.ghost:hover{ border-color: var(--oc-action); color: var(--oc-action); }
.btn.gold{
  background: var(--oc-gold);
  border-color: var(--oc-gold);
  color: var(--ink-900);
}
.btn.gold:hover{ filter: brightness(1.05); }
.btn.main{
  background: var(--oc-action);
  border-color: var(--oc-action);
  color: var(--oc-text-invert);
  font-weight: 600;
}
.btn.main:hover{ background: var(--oc-action-hover); border-color: var(--oc-action-hover); }
.btn.block{ display: flex; width: 100%; }

/* 禁用态：置于所有变体之后以确保生效。
   不用 opacity —— 那会让禁用按钮上的文字对比度掉到 2.35:1；
   改用浅底 + 可读墨字（7.98:1）：用户仍须读得懂为什么不能点 */
.btn:disabled,
.btn[disabled]{
  background: var(--oc-surface-2);
  border-color: var(--oc-line-soft);
  color: var(--oc-text-muted);
  cursor: default;
  pointer-events: none;
}

/* 加载：旋转指示器（全站当前仅 11 处，本层补齐） */
.btn.is-loading{ pointer-events: none; opacity: .7; }
.btn.is-loading::before{
  content: '';
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: oc-spin .7s linear infinite;
}
/* 错误：全站当前为 0 处，本层补齐 */
.btn.is-error{ border-color: var(--oc-accent); color: var(--oc-accent); }
.btn.is-error:hover{ background: var(--oc-surface-2); }
@keyframes oc-spin{ to{ transform: rotate(360deg); } }

/* ============================================================
   Card · .card
   默认 display:block（与 HTML 默认一致，避免误伤既有布局）；
   需要纵向堆叠时显式加 .card--stack
   ============================================================ */
.card{
  padding: 20px;
  border: 1px solid var(--oc-line-soft);
  border-radius: var(--oc-r-lg);
  background: var(--oc-surface-2);
  color: var(--oc-text);
}
.card--stack{ display: flex; flex-direction: column; gap: var(--oc-gap); }
.card--flush{ padding: 0; overflow: hidden; }

/* 卡内排版：标题用 berry-700（压纸面 5.01:1），正文用 ink-700（8.47:1） */
.card__title{
  font-family: var(--x-font-serif, inherit);
  font-size: var(--fs-16, 16px);
  font-weight: 500;
  color: var(--oc-accent);
}
.card__sub{
  font-size: var(--fs-14, 14px);
  line-height: 1.85;
  color: var(--oc-text-muted);
}
.card__foot{ display: flex; flex-wrap: wrap; gap: 8px; }

.card.is-active{ border-color: var(--oc-action); }
.card.is-error{ border-color: var(--oc-accent); }
.card.is-loading{ opacity: .6; pointer-events: none; }

/* ============================================================
   Toast · .toast
   现状：全站 24 份定义，底部偏移 30/64/84/96/calc() 五种，
        背景 5 种近黑裸 rgba，z-index 90~11000 天差地别 —— 本层统一
   ============================================================ */
.toast{
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(8px);
  z-index: var(--oc-z-toast);
  max-width: 88%;
  padding: 10px 20px;
  border-radius: var(--oc-r-pill);
  background: var(--ink-900);
  color: var(--oc-text-invert);
  font-size: var(--fs-14, 14px);
  line-height: 1.6;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--oc-dur) ease, transform var(--oc-dur) var(--oc-ease);
}
.toast.is-show{ opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--error{ background: var(--oc-accent); }

/* ============================================================
   动效降级（全站当前覆盖约 30%，本层兜底到 100%）
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .btn,
  .card,
  .toast{ transition: none; }
  .btn.is-loading::before{ animation: none; }
}