/* MDtoDOCX — Paper & Signal 主题 token
 * 唯一来源。SEO 站 (Go HTML)、App (React)、插件 (WXT) 三端共用。
 * 规范见 .kiro/specs/md2word/ui-theme.md — 不要在页面里写死颜色。
 */

:root {
  /* ── 纸张与表面 ───────────────────────────── */
  --canvas:        #FCFBF8;
  --surface:       #FFFFFF;
  --surface-2:     #F5F3EE;
  --surface-3:     #EDEAE2;
  --overlay:       rgba(20, 22, 26, .48);

  /* ── 墨色 ─────────────────────────────────── */
  --ink-900:       #14161A;
  --ink-700:       #363B44;
  --ink-500:       #6A7280;
  --ink-400:       #99A0AB;

  /* ── 描边 ─────────────────────────────────── */
  --line:          #E6E2D9;
  --line-strong:   #D5D0C4;

  /* ── 品牌蓝：导航、链接、次级按钮 ─────────── */
  --brand-50:      #EEF2FF;
  --brand-100:     #DFE5FE;
  --brand-200:     #C3CEFC;
  --brand-500:     #4B5BD7;
  --brand-600:     #3B49BE;
  --brand-700:     #2E399A;
  --brand-900:     #1D2569;

  /* ── 行动琥珀：只给主 CTA，一屏一个 ────────── */
  --accent-400:    #FBBF4C;
  --accent-500:    #F59E0B;
  --accent-600:    #DC8409;
  --accent-700:    #B36907;
  --on-accent:     #231603;

  /* ── Pro 金：只用于锁标与徽章，不用于按钮 ──── */
  --pro-bg:        linear-gradient(135deg, #FDE9B8 0%, #F7D486 100%);
  --pro-ink:       #7A5405;
  --pro-line:      #E9C878;

  /* ── 状态 ─────────────────────────────────── */
  --ok-500:        #0E9F6E;
  --ok-bg:         #E7F7F1;
  --warn-500:      #D97706;
  --warn-bg:       #FDF3E3;
  --err-500:       #DC2626;
  --err-bg:        #FDECEC;

  /* ── 文档预览：模拟 Word 纸面 ──────────────── */
  --doc-paper:     #FFFFFF;
  --doc-ink:       #1A1A1A;
  --doc-shadow:    0 1px 2px rgba(20,22,26,.06), 0 8px 24px rgba(20,22,26,.08);

  /* ── 字体 ─────────────────────────────────── */
  --font-display: "Inter Tight", Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-body:    Inter, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-doc:     Calibri, Carlito, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* ── 间距 ─────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ── 圆角 ─────────────────────────────────── */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;

  /* ── 阴影：暖调，不用纯黑 ──────────────────── */
  --sh-1: 0 1px 2px rgba(20,22,26,.05);
  --sh-2: 0 1px 3px rgba(20,22,26,.07), 0 4px 12px rgba(20,22,26,.05);
  --sh-3: 0 2px 6px rgba(20,22,26,.07), 0 12px 32px rgba(20,22,26,.09);
  --sh-accent: 0 2px 6px rgba(245,158,11,.24), 0 8px 20px rgba(245,158,11,.18);

  /* ── 层级 ─────────────────────────────────── */
  --z-sticky: 100; --z-header: 200; --z-dropdown: 300; --z-modal: 400; --z-toast: 500;

  /* ── 动效 ─────────────────────────────────── */
  --t-fast:  120ms ease-out;
  --t-mid:   160ms cubic-bezier(.2,.8,.2,1);
  --t-panel: 220ms cubic-bezier(.2,.8,.2,1);

  /* ── 布局 ─────────────────────────────────── */
  --container: 1200px;
  --measure: 68ch;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-mid: 0ms; --t-panel: 0ms; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}