/* ============================================================
   剪映 AI 剪辑工作台 V4.1 · 设计令牌（Design Tokens）
   规范出处：docs/09_界面设计规范_V4.1.md（任务 t12 落地）
   参考源码：_ref_videoeditor/videoeditor-main/app/app.css（真实源码校准）
   主题：近黑底 #09090b + 面板 #121214 + 霓虹黄绿强调 #c6ff00 + Inter
   说明：仅调整令牌数值，类名体系 / DOM / 接口零改动。
   ============================================================ */

:root {
  /* ---------- 背景层级（参考：background #09090b / card #121214 / muted #27272a） ---------- */
  --bg-base:  #09090b;                      /* 应用最底层（近纯黑 zinc-950） */
  --bg-panel: #121214;                      /* 面板/区域底色（zinc-900） */
  --bg-elev:  #18181b;                      /* 卡片/浮层（card 高一级） */
  --bg-hover: #27272a;                      /* 悬停/选中弱底（zinc-800 = muted） */
  --bg-inset: #09090b;                      /* 输入框/时间轴凹陷区（= timeline-background） */
  --bg-glass: rgba(18,18,20,.92);           /* 玻璃拟态底（card 色，仅弹窗/Toast） */

  /* ---------- 描边/分隔（参考 border #27272a） ---------- */
  --line:          rgba(255,255,255,.09);   /* 常规分隔线 */
  --line-strong:   #27272a;                 /* 强调描边/控件边框（实色 zinc-800） */
  --glass-line:    rgba(255,255,255,.14);   /* 玻璃面亮描边 */

  /* ---------- 文字（参考 foreground #fff / muted-foreground #a1a1aa） ---------- */
  --text-0: #ffffff;   /* 主文字 */
  --text-1: #a1a1aa;   /* 次级文字（zinc-400） */
  --text-2: #71717a;   /* 弱文字/占位（zinc-500） */

  /* ---------- 品牌与语义色（主强调 = 霓虹黄绿 #c6ff00） ---------- */
  --accent:     #c6ff00;   /* 主操作色（primary 霓虹黄绿） */
  --accent-2:   #a3e635;   /* 辅助强调（lime-400，渐变第二色） */
  --accent-3:   #d9ff66;   /* 主色高光（黄绿高亮） */
  --accent-soft: rgba(198,255,0,.14);       /* 主色弱底（选中/激活背景） */
  --accent-2-soft: rgba(163,230,53,.12);    /* 次级弱底 */
  --grad-brand:      linear-gradient(135deg,#c6ff00 0%,#a3e635 100%);                    /* 品牌渐变（进度条/品牌字） */
  --grad-brand-soft: linear-gradient(135deg,rgba(198,255,0,.14),rgba(163,230,53,.12));   /* 品牌渐变弱底（激活导航等） */

  --ok:     #22c55e;   /* 成功/已绑定/保留（green-500） */
  --warn:   #f59e0b;   /* 警告/缺口/待定（amber-500） */
  --err:    #ef4444;   /* 错误/失败/禁止（red-500 = destructive） */
  --info:   #38bdf8;   /* 信息/进行中（sky-400） */

  /* 语义色弱底 */
  --ok-soft:     rgba(34,197,94,.15);
  --warn-soft:   rgba(245,158,11,.16);
  --err-soft:    rgba(239,68,68,.15);
  --info-soft:   rgba(56,189,248,.16);
  --err-faint:   rgba(239,68,68,.05);

  /* 语义色光晕 */
  --ok-glow:     rgba(34,197,94,.45);
  --warn-glow:   rgba(245,158,11,.45);
  --err-glow:    rgba(239,68,68,.45);
  --info-glow:   rgba(56,189,248,.45);
  --accent-glow: rgba(198,255,0,.16);
  --accent-glow-strong: rgba(198,255,0,.55);

  /* 去气口专用 */
  --cut:         #f97316;
  --cut-soft:    rgba(249,115,22,.22);
  --cut-strong:  rgba(249,115,22,.38);

  /* 预览舞台底色 */
  --stage-bg: #000;

  /* ---------- 轨道着色（参考 Scrubber 媒体类型色） ---------- */
  --track-video:    #c6ff00;   /* 视频 = primary 黄绿 */
  --track-subtitle: #22c55e;   /* 字幕 = green-500 */
  --track-audio:    #2563eb;   /* 音频 = blue-600 */
  --track-effect:   #9333ea;   /* 效果 = purple-600 */

  /* 轨道弱底（片段块底色） */
  --track-video-soft:    rgba(198,255,0,.22);
  --track-subtitle-soft: rgba(34,197,94,.16);
  --track-audio-soft:    rgba(37,99,235,.18);
  --track-effect-soft:   rgba(147,51,234,.18);

  /* 片段块顶边高光（白色高光；JS 经 --tgrad 引用） */
  --track-video-grad:    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0));
  --track-subtitle-grad: linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0));
  --track-audio-grad:    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0));
  --track-effect-grad:   linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0));

  /* ---------- 时间轴专用（新增，参考 timeline 系列令牌） ---------- */
  --timeline-bg:    #09090b;   /* 时间轴底 = background */
  --timeline-track: #121214;   /* 偶数轨 = timeline-track */
  --timeline-alt:   #09090b;   /* 奇数轨 = timeline-background */
  --timeline-ruler: #27272a;   /* 标尺底 = timeline-ruler */
  --grid-major: rgba(39,39,42,.85);  /* 每 5s 粗网格线 */
  --grid-minor: rgba(39,39,42,.4);   /* 每 1s 细网格线 */

  /* 播放头（红 = 参考 playhead） */
  --playhead:      #ef4444;
  --playhead-glow: rgba(239,68,68,.5);

  /* ---------- 字体（Inter 优先，离线回退） ---------- */
  --font-ui:   "Noto Sans CJK SC","Source Han Sans SC","Noto Sans SC",system-ui,sans-serif;
  --font-mono: "Noto Sans Mono CJK SC",ui-monospace,"DejaVu Sans Mono",monospace;
  --fs-micro:  9px;
  --fs-mini:   10px;
  --fs-small:  12px;
  --fs-body:   13px;
  --fs-em:     14px;
  --fs-title:  16px;
  --fs-page:   18px;
  --fs-display: 20px;

  /* ---------- 间距（4pt 基准，保持不变） ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ---------- 圆角（基准 6px = 0.375rem） ---------- */
  --radius-ctl:   6px;   /* 控件 = radius */
  --radius-card:  8px;   /* 卡片 */
  --radius-panel: 10px;  /* 面板 */
  --radius-clip:  4px;   /* 时间轴片段 */
  --radius-modal: 12px;  /* 弹窗/抽屉 */
  --radius-pill:  999px; /* 胶囊 */

  /* ---------- 阴影（保持 V4 值） ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 1px 6px rgba(0,0,0,.25);
  --shadow-2: 0 2px 6px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.38);
  --shadow-3: 0 4px 12px rgba(0,0,0,.35), 0 24px 56px rgba(0,0,0,.5);
  --ring-focus: 0 0 0 2px rgba(198,255,0,.3);          /* focus 外环（主色） */
  --glow-accent: 0 1px 6px rgba(198,255,0,.26), 0 0 0 1px rgba(198,255,0,.38);  /* 主按钮/选中态光晕 */
  --glow-ok:    0 1px 6px rgba(34,197,94,.3);
  --glow-warn:  0 1px 6px rgba(245,158,11,.3);
  --glow-err:   0 1px 6px rgba(239,68,68,.3);
  --glow-info:  0 1px 6px rgba(56,189,248,.3);

  /* ---------- 动效 ---------- */
  --dur-fast: 120ms;
  --dur-med:  200ms;
  --dur-slow: 280ms;
  --ease-out: cubic-bezier(.22,1,.36,1);

  /* ---------- 玻璃拟态（仅弹窗/Toast 用） ---------- */
  --blur-glass: 16px;
}

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

/* ============================================================
   基础元素默认样式
   ============================================================ */
body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text-0);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
}

/* 时间码统一等宽 + 数字等宽对齐 */
.tc, .timecode {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

/* 焦点可见性：双环 focus ring（主色） */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  box-shadow: var(--ring-focus);
}

/* 禁用态 */
[disabled], .disabled {
  opacity: .38;
  cursor: not-allowed;
  filter: saturate(.4);
}

/* 滚动条 */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-corner { background: transparent; }