@tailwind base;
@tailwind components;
@tailwind utilities;

/* 纸感设计 token（UX_SPEC §2.1） */
:root,
[data-theme="paper"] {
  --color-bg: #f5f1e8;
  --color-panel: #fbf8f1;
  --color-ink: #2b2620;
  --color-ink-soft: #6b6356;
  --color-line: #e5ddcd;
  --color-cinnabar: #a23b2e;
  --color-cinnabar-wash: #a23b2e14;
  --color-conflict: #b5543a;
  --color-overdue: #c8893a;
  --color-pass: #5a6b4f;
  --color-info: #4a5a6b;
  --color-conflict-mark: #b5543a26;
  --color-conflict-mark-strong: #b5543a8c;
  --shadow-paper: #2b26200f;
  color-scheme: light;
}

[data-theme="night"] {
  --color-bg: #181614;
  --color-panel: #221f1b;
  --color-ink: #efe6d7;
  --color-ink-soft: #b9ab96;
  --color-line: #3c352c;
  --color-cinnabar: #e07866;
  --color-cinnabar-wash: #e0786620;
  --color-conflict: #ef8a72;
  --color-overdue: #d8a65d;
  --color-pass: #95b47d;
  --color-info: #8ca8ca;
  --color-conflict-mark: #ef8a7230;
  --color-conflict-mark-strong: #ef8a7290;
  --shadow-paper: #00000045;
  color-scheme: dark;
}

html {
  background: var(--color-bg);
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
}

::selection {
  background: var(--color-cinnabar-wash);
  color: var(--color-ink);
}

/* 流式打字机光标：朱砂闪烁；尊重 prefers-reduced-motion（UX §10）。 */
.typewriter-cursor {
  animation: typewriter-blink 1s step-end infinite;
}

@keyframes typewriter-blink {
  50% {
    opacity: 0;
  }
}

/* 冲突就地标注锚点：朱砂波浪下划线（UX §8.3）。 */
.conflict-anchor {
  text-decoration: underline wavy var(--color-conflict);
  text-underline-offset: 3px;
  transition: background-color 0.15s ease;
}

/* 终稿正文：冲突原文持续高亮（朱砂淡底），点锚点定位时闪烁一下（UX §8.3）。 */
.draft-mark {
  background-color: var(--color-conflict-mark);
  border-radius: 2px;
}
.draft-mark-flash {
  animation: draft-mark-flash 0.9s ease-out;
}

@keyframes draft-mark-flash {
  0%,
  100% {
    background-color: var(--color-conflict-mark);
  }
  30% {
    background-color: var(--color-conflict-mark-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  .typewriter-cursor {
    animation: none;
  }
  .conflict-anchor {
    transition: none;
  }
  .draft-mark-flash {
    animation: none;
    outline: 2px solid var(--color-conflict);
  }
}