/* 童书工坊 · 共享设计 tokens */
:root {
  /* 退出「系统深色时浏览器自动反色」。
     由来：PMS 100847「工作台是深色的」（Android，目鱼儿 App WebView）。本工具从头到尾
     只有一套亮色皮肤，也不读任何主题参数——深色只可能是外面替我们"发明"的：Android
     WebView 的 algorithmic darkening（旧称 force-dark）会把**没声明 color-scheme 的页面**
     整页反色，于是米白纸面变成深灰、绿色字变成荧光绿。
     必须写 `only light` 而不是 `light`：`only` 这个关键字才是 CSS Color Adjust 里
     "别替我改"的那道声明；单写 `light` 只是说"我支持亮色"，反色照旧。
     运维页 status.html 不加载本文件，它自己有一套 prefers-color-scheme 深色，保持原样。 */
  color-scheme: only light;

  /* Forest green palette */
  --ink-900: #14201c;
  --ink-700: #2a3b35;
  --ink-500: #4a5d55;
  --ink-300: #5f7069;
  --ink-200: #61716a;

  --forest-900: #132e26;
  --forest-800: #1f4438;
  --forest-700: #2d5b4e;
  --forest-600: #3d7566;
  --forest-500: #5a9384;
  --forest-100: #e3ece6;
  --forest-50:  #eff4f0;

  /* Warm paper backgrounds */
  --paper-0:  #faf7ef;   /* page bg */
  --paper-50: #f4efe1;   /* card bg alt */
  --paper-100:#ede5cf;   /* divider warm */
  --paper-200:#ddd4bc;

  /* Accents */
  --orange-600: #c25f3d;
  --orange-500: #d97757;
  --orange-100: #f7e4d9;
  --mustard-600:#a8851e;
  --mustard-500:#c9a236;
  --mustard-100:#f3e8c4;
  --cream:      #fffdf5;

  /* Borders */
  --line:  #e5ddc6;
  --line-strong: #d1c7a8;
  --line-ink: rgba(20,32,28,0.12);

  /* Shadow */
  --shadow-sm: 0 1px 0 rgba(20,32,28,0.04), 0 1px 2px rgba(20,32,28,0.06);
  --shadow-md: 0 2px 4px rgba(20,32,28,0.04), 0 8px 24px rgba(20,32,28,0.08);
  --shadow-book: 0 1px 0 rgba(255,255,255,0.5) inset, 0 10px 30px rgba(20,32,28,0.18), 0 30px 60px rgba(20,32,28,0.12);

  /* Radius */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  /* Type */
  --serif: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', ui-serif, serif;
  --sans:  'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', system-ui, sans-serif;
}

* { box-sizing: border-box; }
/* 关掉移动 WebView 的原生点击高亮。
 *
 * 默认行为：点任意可点元素，浏览器自己在上面盖一层半透明灰色圆角块。它由浏览器绘制、
 * 不受页面控制，所以**页面切走了它还留在原来的屏幕位置**，过一会儿才被下一次合成擦掉
 * ——QA 在移动端录到的「点完切页，阴影还在，一会才消失」就是它，多处都会出现。
 *
 * 放在 html 上而不是逐个元素：这个属性会继承，一条覆盖全站。
 * 注意 ip-admin.html 不引 tokens.css，它自己那份要单独写。 */
html { -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink-900);
  background: var(--paper-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Reusable primitives */
.tk-btn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.12s ease;
  white-space: nowrap;
}
.tk-btn-primary {
  background: var(--forest-800);
  color: var(--cream);
  border-color: var(--forest-900);
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, var(--shadow-sm);
}
/* 触屏没有 mouseout：点完 :hover 会一直挂着，直到用户点别处 —— 表现成「点过的按钮一直高亮」。
   所以带 :hover 的规则统一关在 (hover: hover) 里。
   ⚠️ 必须**就地**包，不能挪到文件末尾集中处理：有几条 hover 与选中态（.vc-age-on 等）同优先级，
   一挪就会盖住选中态。 */
@media (hover: hover) { /* hover 必须排除禁用态：:disabled 不阻止 :hover 匹配，而禁用态又叠了 opacity .45，
   两者一起作用就是「背景变深 + 文字变淡」，加载中的按钮（如「AI 正在构思…」）鼠标一放
   就看不清字。禁用的按钮本来也不该给悬停反馈。 */
.tk-btn-primary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--forest-700); } }
.tk-btn-ghost {
  background: transparent;
  color: var(--ink-700);
  border-color: var(--line);
}
@media (hover: hover) { .tk-btn-ghost:not(:disabled):not([aria-disabled="true"]):hover { background: var(--paper-50); border-color: var(--line-strong); } }
.tk-btn:focus-visible,
.vc-pill:focus-visible,
.theme-pill:focus-visible,
.bc:focus-visible,
.vc-brand:focus-visible {
  outline: 3px solid rgba(45,91,78,0.32);
  outline-offset: 3px;
}
/* aria-disabled 与原生 :disabled 同款外观。用 aria-disabled 是为了让点击仍能触发
   （原生 disabled 的按钮不产生 click 事件 → 点了毫无反应），好给用户一条说明。 */
.tk-btn:disabled,
.tk-btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.45; }

.tk-input, .tk-select, .tk-textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-900);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  transition: border-color 0.12s, box-shadow 0.12s;
  outline: none;
}
.tk-input:focus, .tk-select:focus, .tk-textarea:focus {
  border-color: var(--forest-700);
  box-shadow: 0 0 0 3px rgba(45,91,78,0.12);
}
.tk-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232a3b35' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.tk-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-500);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.tk-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}