/* ==========================================================================
   tokens.css — WorkTools 设计令牌（提取自 www.qwcommunity.com 的 --tz-* 系统）
   保持与主站 1:1 一致，后续主站改版只需同步本文件。
   ========================================================================== */

:root {
  /* —— 画布与层次 —— */
  --tz-canvas:          #f7f9ff;
  --tz-canvas-2:        #f8fafc;
  --tz-surface:         rgba(255, 255, 255, 0.82);
  --tz-surface-solid:   #ffffff;

  /* —— 文字 —— */
  --tz-ink:             #0f172a;
  --tz-muted:           #64748b;
  --tz-faint:           #94a3b8;

  /* —— 线条 —— */
  --tz-line:            #e8eefc;
  --tz-line-strong:     #d6e0f5;

  /* —— 主色 —— */
  --tz-accent:          #2563eb;
  --tz-accent-hover:    #1d4ed8;
  --tz-accent-soft:     #dbeafe;
  --tz-accent-softer:   #eff6ff;

  /* —— 语义色（编辑器内部使用，与主站色系保持同一灰度/饱和度） —— */
  --tz-danger:          #dc2626;
  --tz-danger-soft:     #fef2f2;
  --tz-success:         #16a34a;

  /* —— 圆角 —— */
  --tz-radius-sm:       10px;
  --tz-radius:          14px;
  --tz-radius-lg:       18px;
  --tz-radius-pill:     999px;

  /* —— 阴影 —— */
  --tz-shadow:          0 10px 30px rgba(37, 99, 235, 0.10);
  --tz-shadow-lg:       0 20px 50px rgba(37, 99, 235, 0.12);
  --tz-shadow-paper:    0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.08);

  /* —— 字体（系统栈，无外链字体） —— */
  --tz-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
             "Segoe UI", "PingFang SC", "Hiragino Sans GB",
             "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --tz-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;

  /* —— 编辑器专用 —— */
  --tz-header-h:        56px;
  --tz-ribbon-h:        96px;
  --tz-paper-w:         794px;   /* A4 @96dpi */
  --tz-paper-h:         1123px;
  --tz-paper-pad:       72px;    /* 约 1.9cm 页边距 */

  --tz-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 主站组件类复刻 —— 保证子模块与门户视觉完全同源 */
.tz-panel {
  background: var(--tz-surface);
  border: 1px solid var(--tz-line);
  border-radius: var(--tz-radius);
  box-shadow: var(--tz-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.tz-panel-solid {
  background: var(--tz-surface-solid);
  border: 1px solid var(--tz-line);
  border-radius: var(--tz-radius);
  box-shadow: var(--tz-shadow);
}

.tz-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--tz-line);
  border-radius: var(--tz-radius-pill);
  background: rgba(255, 255, 255, 0.8);
  color: var(--tz-ink);
  font-family: var(--tz-font);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.16s var(--tz-ease), box-shadow 0.16s var(--tz-ease),
              background-color 0.16s var(--tz-ease), border-color 0.16s var(--tz-ease);
}
.tz-button:hover { transform: translateY(-1px); border-color: var(--tz-line-strong); }
.tz-button:active { transform: translateY(0); }
.tz-button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.tz-button-primary {
  background: var(--tz-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}
.tz-button-primary:hover { background: var(--tz-accent-hover); box-shadow: 0 12px 28px rgba(37, 99, 235, 0.34); }

.tz-button-ghost { background: rgba(255, 255, 255, 0.65); }

.tz-button-soft {
  background: var(--tz-accent-softer);
  border-color: #bfdbfe;
  color: var(--tz-accent-hover);
}

.tz-button-sm { min-height: 2rem; padding: 0 0.75rem; font-size: 0.8125rem; }

.tz-input {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--tz-line);
  border-radius: var(--tz-radius-sm);
  background: var(--tz-surface-solid);
  color: var(--tz-ink);
  font-family: var(--tz-font);
  font-size: 0.875rem;
}
.tz-input:focus { outline: 2px solid var(--tz-accent); outline-offset: 1px; }

.tz-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.875rem;
  padding: 0 0.625rem;
  border: 1px solid var(--tz-line);
  border-radius: var(--tz-radius-pill);
  background: var(--tz-surface-solid);
  color: var(--tz-muted);
  font-size: 0.75rem;
  font-weight: 600;
}
.tz-chip-active {
  background: var(--tz-accent-softer);
  border-color: #93c5fd;
  color: var(--tz-accent-hover);
}

.tz-eyebrow {
  font-family: var(--tz-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tz-accent);
}

:focus-visible { outline: 2px solid var(--tz-accent); outline-offset: 2px; }

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