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

/* 纸感设计 token（UX_SPEC §2.1） */
:root {
  --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;
}

body {
  background: var(--color-bg);
  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: #b5543a26; /* --color-conflict @ ~15% */
  border-radius: 2px;
}
.draft-mark-flash {
  animation: draft-mark-flash 0.9s ease-out;
}

@keyframes draft-mark-flash {
  0%,
  100% {
    background-color: #b5543a26;
  }
  30% {
    background-color: #b5543a8c; /* --color-conflict @ ~55% */
  }
}

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