/* ───────────────────────────────────────────────────────────
   Zhen Drama — Editorial Dark 设计令牌
   专业影视编剧工具 · 深色衬线审美
   ─────────────────────────────────────────────────────────── */

:root {
  /* 层次 — 深色画布 */
  --ink-void:   #07070a;      /* 最深层 / 舞台黑 */
  --ink-black:  #0d0d11;      /* 页面底色 */
  --ink-900:    #131318;      /* 主面板 */
  --ink-800:    #1a1a21;      /* 抬起层 */
  --ink-700:    #23232c;      /* 分隔/悬停 */
  --ink-600:    #2d2d38;      /* 边界 */
  --ink-500:    #3a3a47;      /* hairline */

  /* 文字 — 旧纸白,非纯白 */
  --paper-100:  #eeebe2;      /* 主文字,柔和奶白 */
  --paper-200:  #d8d4c7;      /* 次要 */
  --paper-300:  #a8a394;      /* 元信息 */
  --paper-400:  #6b6759;      /* 禁用/水印 */
  --paper-500:  #4a4740;      /* 更淡 */

  /* 金色系 — 点缀,电影片尾字幕色 */
  --gold-100:   #f2e4b8;
  --gold-300:   #d4b670;
  --gold-500:   #b8985a;      /* 主金色 */
  --gold-700:   #8a6f3d;
  --gold-900:   #4a3b20;

  /* 语义色 — 最少使用 */
  --accent-blood:   #8b2d2d;  /* 冲突/删除 */
  --accent-ink:     #3d5a80;  /* 引用/链接 */
  --accent-locked:  #c9a961;  /* 锁定态 */
  --accent-live:    #7a9e6e;  /* 进行中 */

  /* 阶段色 — 6 个阶段各一个低饱和色块 */
  --stage-concept:    #8a6f3d;  /* 创意·金 */
  --stage-synopsis:   #6b5c8a;  /* 梗概·紫 */
  --stage-characters: #8a5c4a;  /* 人物·赭 */
  --stage-outline:    #4a7a7a;  /* 大纲·青 */
  --stage-episodes:   #7a4a5c;  /* 分集·酒 */
  --stage-draft:      #5c7a4a;  /* 底稿·橄榄 */

  /* 字体 */
  --font-serif:   "Noto Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif;
  --font-sans:    "Noto Sans SC", "PingFang SC", -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* 字号 */
  --fs-micro: 11px;
  --fs-xs:    12px;
  --fs-sm:    13px;
  --fs-base:  14px;
  --fs-md:    15px;
  --fs-lg:    17px;
  --fs-xl:    20px;
  --fs-2xl:   26px;
  --fs-3xl:   34px;
  --fs-display: 48px;

  /* 节奏 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* 边角 — 保守,几乎方形 */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 8px;

  /* 阴影 — 深色环境下用内阴影+低外扩 */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lift: 0 1px 0 rgba(255,255,255,0.05) inset, 0 12px 40px rgba(0,0,0,0.6);

  /* 其它 */
  --hair: 1px solid var(--ink-600);
  --hair-soft: 1px solid var(--ink-700);

  /* Tint — 金色透明叠色 & 页面 scrim,在浅深两套里各自重定义
     深色:金色 rgba(184,152,90, a) / 背景 scrim 13,13,17
     浅色:金色 rgba(168,134,74, a) / 背景 scrim 236,232,219 */
  --tint-gold-03:    rgba(184,152,90, 0.03);
  --tint-gold-05:    rgba(184,152,90, 0.05);
  --tint-gold-06:    rgba(184,152,90, 0.06);
  --tint-gold-07:    rgba(184,152,90, 0.07);
  --tint-gold-08:    rgba(184,152,90, 0.08);
  --tint-gold-10:    rgba(184,152,90, 0.10);
  --tint-gold-15:    rgba(184,152,90, 0.15);
  --tint-gold-glow:  rgba(212,182,112, 0.15);
  --tint-gold-shadow:0 0 10px rgba(184,152,90, 0.4);
  --scrim-panel:     rgba(13,13,17, 0.9);
}

/* ───────────────────────────────────────────────────────────
   Light Mode · 白昼 / Daylight
   反白模式:米白纸 + 深墨文字 + 暗金点缀
   像"剧本打印稿"的气质——衬线气质不变,只是换成白天读
   ─────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  /* 背景层次反转 — 米白纸色由深到浅 */
  --ink-void:   #d4cfbf;      /* 最深边界 */
  --ink-black:  #ece8db;      /* 页面底色 主纸色 */
  --ink-900:    #f2efe4;      /* 主面板 */
  --ink-800:    #f7f4eb;      /* 抬起层 */
  --ink-700:    #e5e0d0;      /* 分隔/悬停 */
  --ink-600:    #cfc8b4;      /* 边界 */
  --ink-500:    #b8b09a;      /* hairline */

  /* 文字 — 深墨,非纯黑 */
  --paper-100:  #1a1812;      /* 主文字 */
  --paper-200:  #3a362a;      /* 次要 */
  --paper-300:  #6b6555;      /* 元信息 */
  --paper-400:  #908770;      /* 禁用 */
  --paper-500:  #b0a68a;

  /* 金色 — 暗金更贴纸色 */
  --gold-100:   #4a3b20;
  --gold-300:   #8a6f3d;      /* 强调色 */
  --gold-500:   #a8864a;      /* 主金色 */
  --gold-700:   #c9a961;      /* 浅金 按钮悬停 */
  --gold-900:   #f2e4b8;

  /* 语义 */
  --accent-blood:  #7a2424;
  --accent-ink:    #2d4566;
  --accent-locked: #8a6f3d;
  --accent-live:   #5a7a4e;

  /* 阴影 */
  --shadow-1: 0 1px 2px rgba(30,20,10,0.08);
  --shadow-2: 0 4px 16px rgba(30,20,10,0.12);
  --shadow-lift: 0 12px 40px rgba(30,20,10,0.18);
}

:root[data-theme="light"] ::selection {
  background: var(--gold-700);
  color: var(--paper-100);
}

:root[data-theme="light"] {
  --tint-gold-03:    rgba(168,134,74, 0.05);
  --tint-gold-05:    rgba(168,134,74, 0.07);
  --tint-gold-06:    rgba(168,134,74, 0.08);
  --tint-gold-07:    rgba(168,134,74, 0.10);
  --tint-gold-08:    rgba(168,134,74, 0.12);
  --tint-gold-10:    rgba(168,134,74, 0.14);
  --tint-gold-15:    rgba(168,134,74, 0.20);
  --tint-gold-glow:  rgba(168,134,74, 0.25);
  --tint-gold-shadow:0 0 10px rgba(168,134,74, 0.35);
  --scrim-panel:     rgba(247,244,235, 0.9);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink-black);
  color: var(--paper-100);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

input, textarea {
  font-family: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}

::selection {
  background: var(--gold-700);
  color: var(--paper-100);
}

/* 滚动条 — 深色细 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-500); background-clip: content-box; border: 2px solid transparent; }

/* 衬线标题 */
.serif { font-family: var(--font-serif); }
.mono { font-family: var(--font-mono); }

/* 小写字母间距感 — 片头字幕 */
.caps {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-micro);
  color: var(--paper-300);
}

/* ─────────────────────────────────────────────────────────
   AI Thinking 动画 — Manus / Claude 风
   ───────────────────────────────────────────────────────── */

@keyframes shimmer-sweep {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.thinking-shimmer {
  background: linear-gradient(
    90deg,
    var(--paper-400) 0%,
    var(--paper-400) 40%,
    var(--gold-100) 50%,
    var(--paper-400) 60%,
    var(--paper-400) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-sweep 2.4s linear infinite;
}

@keyframes pulse-ring {
  0%   { transform: scale(0.85); opacity: 0.7; }
  50%  { transform: scale(1.1);  opacity: 0.3; }
  100% { transform: scale(0.85); opacity: 0.7; }
}

@keyframes orbit-dot {
  from { transform: rotate(0deg) translateX(12px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(12px) rotate(-360deg); }
}

@keyframes ink-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

@keyframes cursor-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.blink-cursor::after {
  content: '▋';
  display: inline-block;
  margin-left: 2px;
  color: var(--gold-500);
  animation: cursor-blink 1s steps(2) infinite;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up { animation: fade-up 0.4s ease-out both; }

/* hairline divider w/ gold capstone */
.divider-gold {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--paper-400);
}
.divider-gold::before, .divider-gold::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-500), transparent);
}

/* 金色 hairline 边框 */
.edge-gold {
  position: relative;
}
.edge-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--gold-700) 0%, transparent 30%) 0 0/1px 100% no-repeat;
}