/* ==========================================================================
   Trace Design Tokens
   --------------------------------------------------------------------------
   命名规则：CSS 变量 --trace-foo-bar  ⇄  Swift  Color.traceFooBar / TraceMetrics.fooBar
   颜色三套：light（默认）、dark、增强对比度（data-contrast="more"，可与明暗叠加）
   痕迹墨色不跟随 App 外观，而跟随「纸面」：data-paper="light" | "dark"
   （深色 App + 原色 PDF 仍是浅色纸面，墨色保持浅色版；压暗/反色时才切换到提亮墨色）
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Charis+SIL:ital,wght@0,400;0,700;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=STIX+Two+Text:ital,wght@0,400;0,600;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=Fraunces:opsz,wght@9..144,500;9..144,700;9..144,800&family=Libre+Franklin:wght@500;600;700;800&family=Special+Elite&display=swap");

:root,
[data-theme="light"] {
  color-scheme: light;

  /* ---- Surfaces（映射 NSColor 语义色） -------------------------------- */
  --trace-window: #f4f4f3;            /* windowBackgroundColor */
  --trace-toolbar: #f8f8f7;           /* unified toolbar 区域 */
  --trace-sidebar: #ececea;           /* source list 背景（不透明近似值） */
  --trace-content: #ffffff;           /* controlBackgroundColor：列表、表单 */
  --trace-canvas: #e4e3df;            /* PDFView 背景：略暖的“书桌灰” */
  --trace-surface: #ffffff;           /* Reader 浮层：不透明实色 */
  --trace-surface-sunken: #f5f5f3;    /* 浮层内次级底：注释框、代码块 */

  /* ---- Labels ---------------------------------------------------------- */
  --trace-label: rgba(0, 0, 0, 0.86);          /* labelColor */
  --trace-label-secondary: rgba(0, 0, 0, 0.56);/* secondaryLabelColor */
  --trace-label-tertiary: rgba(0, 0, 0, 0.34); /* tertiaryLabelColor */
  --trace-label-quaternary: rgba(0, 0, 0, 0.18);

  --trace-separator: rgba(0, 0, 0, 0.1);       /* separatorColor */
  --trace-separator-strong: rgba(0, 0, 0, 0.16);
  --trace-fill: rgba(0, 0, 0, 0.045);          /* hover 底 */
  --trace-fill-pressed: rgba(0, 0, 0, 0.085);  /* pressed 底 */
  --trace-fill-selected: rgba(0, 0, 0, 0.075); /* sidebar 选中（非强调） */

  --trace-accent: #0a70e8;            /* controlAccentColor（系统默认蓝的近似） */
  --trace-accent-fg: #ffffff;
  --trace-focus-ring: rgba(10, 112, 232, 0.45);

  --trace-positive: #3d8b5a;
  --trace-caution: #a8741f;
  --trace-negative: #bf4a3c;

  /* ---- 选区与点按反馈（共用同一颜色，PRD 约束） ------------------------ */
  --trace-selection: rgba(10, 112, 232, 0.24);
  --trace-selection-blend: multiply;
  --trace-selection-handle: #0a70e8;

  /* ---- Overlay（助手浮层 / Hover 预览 / 操作条 / 命令面板） ------------ */
  --trace-overlay-bg: #ffffff;
  --trace-overlay-border: rgba(0, 0, 0, 0.1);
  --trace-overlay-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 22px -8px rgba(0, 0, 0, 0.16);
  --trace-overlay-shadow-drag: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 34px -10px rgba(0, 0, 0, 0.24);
  --trace-skeleton: rgba(0, 0, 0, 0.06);
  --trace-skeleton-sheen: rgba(0, 0, 0, 0.1);
  --trace-grip: rgba(0, 0, 0, 0.18);

  --trace-page-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 24px -16px rgba(0, 0, 0, 0.22);
  --trace-cover-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 1px 1.5px rgba(0, 0, 0, 0.08), 0 6px 12px -8px rgba(0, 0, 0, 0.22);
  --trace-window-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 22px 60px -18px rgba(0, 0, 0, 0.35), 0 8px 20px -10px rgba(0, 0, 0, 0.18);

  --trace-scrim: rgba(0, 0, 0, 0.12);        /* 命令面板 / 引导背后的遮罩 */
  --trace-focus-dim: rgba(20, 18, 14, 0.15); /* 专注阅读：非当前行压暗 15% */
  --trace-focus-band: rgba(255, 244, 214, 0.34);
  --trace-speech-word: rgba(91, 103, 120, 0.16);
  --trace-ocr-sweep: rgba(10, 112, 232, 0.07);
}

/* ---- 痕迹墨色：跟随纸面，而不是 App 外观 --------------------------------- */
:root,
[data-paper="light"] {
  --trace-graphite: #5b6778;   /* 默认：带一点蓝的石墨 */
  --trace-ochre: #9a6a37;      /* 赭石 */
  --trace-indigo: #47588b;     /* 靛青 */
  --trace-moss: #5b7351;       /* 苔绿 */
  --trace-vermilion: #a2513e;  /* 朱砂 */
  --trace-ink: var(--trace-graphite);
  --trace-ink-opacity: 0.78;         /* 词/词组点线 */
  --trace-margin-opacity: 0.72;      /* 句/段页边记号 */
  --trace-ink-hover-opacity: 1;

  --trace-hl-citron: rgba(246, 219, 92, 0.46);  /* 默认高亮：柔和萤黄 */
  --trace-hl-mint: rgba(150, 212, 170, 0.42);
  --trace-hl-rose: rgba(238, 176, 170, 0.42);
  --trace-hl-sky: rgba(160, 200, 236, 0.45);
  --trace-hl-blend: multiply;

  --trace-reunion-opacity: 0.35;
}

[data-paper="dark"] {
  --trace-graphite: #a4b0c2;
  --trace-ochre: #d3a672;
  --trace-indigo: #9eadde;
  --trace-moss: #a3b993;
  --trace-vermilion: #de9480;
  --trace-ink: var(--trace-graphite);
  --trace-ink-opacity: 0.82;
  --trace-margin-opacity: 0.78;
  --trace-ink-hover-opacity: 1;

  --trace-hl-citron: rgba(214, 186, 72, 0.3);
  --trace-hl-mint: rgba(110, 180, 136, 0.28);
  --trace-hl-rose: rgba(210, 128, 120, 0.28);
  --trace-hl-sky: rgba(110, 158, 214, 0.3);
  --trace-hl-blend: screen;

  --trace-reunion-opacity: 0.45;
}

[data-theme="dark"] {
  color-scheme: dark;

  --trace-window: #1e1e1f;
  --trace-toolbar: #262627;
  --trace-sidebar: #232324;
  --trace-content: #1b1b1c;
  --trace-canvas: #141414;
  --trace-surface: #2b2b2d;
  --trace-surface-sunken: #232325;

  --trace-label: rgba(255, 255, 255, 0.88);
  --trace-label-secondary: rgba(255, 255, 255, 0.56);
  --trace-label-tertiary: rgba(255, 255, 255, 0.34);
  --trace-label-quaternary: rgba(255, 255, 255, 0.18);

  --trace-separator: rgba(255, 255, 255, 0.1);
  --trace-separator-strong: rgba(255, 255, 255, 0.16);
  --trace-fill: rgba(255, 255, 255, 0.06);
  --trace-fill-pressed: rgba(255, 255, 255, 0.1);
  --trace-fill-selected: rgba(255, 255, 255, 0.09);

  --trace-accent: #2f8cff;
  --trace-focus-ring: rgba(47, 140, 255, 0.5);
  --trace-positive: #6cbf88;
  --trace-caution: #d8a24e;
  --trace-negative: #eb7c6c;

  --trace-selection: rgba(47, 140, 255, 0.3);
  --trace-selection-handle: #2f8cff;

  --trace-overlay-bg: #2b2b2d;
  --trace-overlay-border: rgba(255, 255, 255, 0.1);
  --trace-overlay-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.2), 0 10px 26px -8px rgba(0, 0, 0, 0.5);
  --trace-overlay-shadow-drag: 0 0 0 0.5px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.26), 0 18px 40px -10px rgba(0, 0, 0, 0.62);
  --trace-skeleton: rgba(255, 255, 255, 0.07);
  --trace-skeleton-sheen: rgba(255, 255, 255, 0.12);
  --trace-grip: rgba(255, 255, 255, 0.22);

  --trace-page-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.8), 0 10px 24px -14px rgba(0, 0, 0, 0.7);
  --trace-cover-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 1px 1.5px rgba(0, 0, 0, 0.4), 0 6px 12px -8px rgba(0, 0, 0, 0.6);
  --trace-window-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.07) inset, 0 22px 60px -18px rgba(0, 0, 0, 0.7);

  --trace-scrim: rgba(0, 0, 0, 0.3);
  --trace-focus-dim: rgba(0, 0, 0, 0.15);
  --trace-focus-band: rgba(255, 236, 190, 0.07);
  --trace-speech-word: rgba(164, 176, 194, 0.2);
  --trace-ocr-sweep: rgba(47, 140, 255, 0.09);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  }
}

/* ---- 增强对比度：不换色相，只加重分隔、次级文字与痕迹 --------------------- */
[data-contrast="more"] {
  --trace-label-secondary: rgba(0, 0, 0, 0.72);
  --trace-label-tertiary: rgba(0, 0, 0, 0.55);
  --trace-separator: rgba(0, 0, 0, 0.32);
  --trace-separator-strong: rgba(0, 0, 0, 0.45);
  --trace-overlay-border: rgba(0, 0, 0, 0.55);
  --trace-ink-opacity: 1;
  --trace-margin-opacity: 1;
  --trace-underline-width: 1.75px;
  --trace-reunion-opacity: 0.6;
}
[data-contrast="more"] [data-paper] {
  --trace-ink-opacity: 1;
  --trace-margin-opacity: 1;
  --trace-underline-width: 1.75px;
  --trace-reunion-opacity: 0.6;
}
[data-theme="dark"][data-contrast="more"],
[data-theme="dark"] [data-contrast="more"] {
  --trace-label-secondary: rgba(255, 255, 255, 0.76);
  --trace-label-tertiary: rgba(255, 255, 255, 0.58);
  --trace-separator: rgba(255, 255, 255, 0.34);
  --trace-separator-strong: rgba(255, 255, 255, 0.48);
  --trace-overlay-border: rgba(255, 255, 255, 0.6);
}

/* ---- 与外观无关的 token ---------------------------------------------------- */
:root {
  /* Typography */
  --trace-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", system-ui, sans-serif;
  --trace-font-zh: "PingFang SC", -apple-system, "SF Pro Text", "Hiragino Sans GB", sans-serif;
  --trace-font-headword: "New York", "Newsreader", Georgia, serif;
  --trace-font-ipa: "Charis SIL", "Doulos SIL", "Times New Roman", serif;
  --trace-font-mono: "SF Mono", ui-monospace, Menlo, monospace;

  --trace-type-headword: 17px;     /* 衬线词头：视觉上 ≈ 14pt SF 的字重，见 spec §2.3 */
  --trace-type-title: 14px;        /* 浮层标题 / 译文页签标题 */
  --trace-type-body: 13px;         /* 中文释义、译文 */
  --trace-type-context: 12px;      /* 语境补充（次要色） */
  --trace-type-meta: 11px;         /* 词性、页签、日期、辅助信息 */
  --trace-type-caption: 10px;      /* 角标、计数 */
  --trace-type-ipa: 12.5px;

  --trace-leading-body: 20px;      /* 13pt + 2pt 行距（PingFang 实测） */
  --trace-leading-context: 18px;
  --trace-context-gap: 7px;        /* 释义 → 语境补充 段前距（PRD） */

  /* Spacing：4pt 网格 */
  --trace-space-4: 4px;
  --trace-space-8: 8px;
  --trace-space-12: 12px;
  --trace-space-16: 16px;
  --trace-space-20: 20px;
  --trace-space-24: 24px;
  --trace-space-32: 32px;

  /* Radius */
  --trace-radius-overlay: 10px;
  --trace-radius-control: 6px;
  --trace-radius-thumb: 3px;
  --trace-radius-window: 12px;

  /* Overlay metrics（继承 PRD 14/13/11、16/12/8） */
  --trace-overlay-width: 340px;       /* 允许 320–380，随内容与窗口收缩 */
  --trace-overlay-width-min: 320px;
  --trace-overlay-width-max: 380px;
  --trace-overlay-pad-x: 16px;
  --trace-overlay-pad-bottom: 12px;
  --trace-overlay-gap: 8px;
  --trace-overlay-grip-area: 14px;    /* 顶部拖动区；grip 本身 32×3 */
  --trace-overlay-body-max-lines: 8;
  --trace-overlay-tabbar: 30px;
  --trace-overlay-offset: 8px;        /* 与触发词的距离 */
  --trace-overlay-viewport-margin: 8px;

  /* Trace metrics（视图坐标，不随缩放变粗） */
  --trace-underline-width: 1.25px;
  --trace-underline-offset: 2px;      /* 距基线 */
  --trace-underline-dot-pitch: 3px;   /* 点距（圆头点线） */
  --trace-underline-stack: 3.25px;    /* 重叠时逐层下移 */
  --trace-margin-width: 2px;
  --trace-margin-offset: 10px;        /* 距正文栏边 */
  --trace-margin-lane: 5px;           /* 并列记号的间距 */
  --trace-margin-cap: 4px;            /* 段落记号两端的短横 */
  --trace-reunion-size: 3px;
  --trace-handle-knob: 10px;
  --trace-handle-stem: 2px;

  /* Motion：快而安静，无回弹（超调 ≤ 2%） */
  --trace-ease-standard: cubic-bezier(0.2, 0, 0, 1);     /* 出现、位移、高度 */
  --trace-ease-exit: cubic-bezier(0.4, 0, 1, 1);         /* 消失 */
  --trace-ease-pencil: cubic-bezier(0.45, 0.05, 0.3, 1); /* 铅笔划线：起笔略慢、收笔轻 */
  --trace-ease-settle: cubic-bezier(0.25, 0, 0.15, 1);   /* 星标 1.12 → 1 */
  --trace-ease-linear: linear;

  --trace-dur-press: 0ms;            /* 按下即显示遮罩 */
  --trace-dur-overlay-in: 140ms;
  --trace-dur-overlay-out: 120ms;
  --trace-dur-stream-segment: 80ms;
  --trace-dur-height: 120ms;
  --trace-dur-star: 180ms;
  --trace-dur-pencil-line: 220ms;
  --trace-dur-margin-grow: 200ms;
  --trace-dur-unsave: 150ms;
  --trace-dur-hover-delay: 150ms;
  --trace-dur-hover-in: 100ms;
  --trace-dur-hover-out: 100ms;
  --trace-dur-tab-indicator: 160ms;
  --trace-dur-tab-crossfade: 120ms;
  --trace-dur-drag-shadow: 100ms;
  --trace-dur-scroll-dismiss: 150ms;
  --trace-dur-flash: 480ms;          /* 两次 1 → .4 → 1 */
  --trace-dur-toast-in: 160ms;
  --trace-dur-toast-hold: 1200ms;
  --trace-dur-toast-out: 200ms;
  --trace-dur-saved-hint: 1000ms;
  --trace-dur-sidecar: 220ms;
  --trace-dur-palette: 140ms;
  --trace-dur-skeleton-loop: 1400ms;
  --trace-dur-ocr-sweep: 1600ms;

  --trace-double-click-window: 350ms;
  --trace-scroll-dismiss-distance: 120px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --trace-dur-pencil-line: 0ms;
    --trace-dur-margin-grow: 0ms;
    --trace-dur-flash: 0ms;
  }
}