:root {
  --ink: #12151C;
  --paper: #F7F5F0;
  --thread: #C99A3F;
  --teal: #1F5C55;
  --muted: #8B8F9C;
  --brick: #B4483B;
}

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

.thread-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--thread);
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(201, 154, 63, 0.15);
}

.btn-thread {
  background: var(--thread);
  color: var(--ink);
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  font-weight: 600;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.btn-thread:hover { filter: brightness(1.08); }
.btn-thread:active { transform: translateY(1px); }

.btn-ghost {
  border: 1px solid rgba(247, 245, 240, 0.2);
  color: var(--paper);
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  font-weight: 500;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.btn-ghost:hover { border-color: rgba(247, 245, 240, 0.5); background: rgba(247, 245, 240, 0.04); }

.card-manuscript {
  background: rgba(247, 245, 240, 0.03);
  border: 1px solid rgba(247, 245, 240, 0.1);
  border-radius: 10px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card-manuscript:hover {
  border-color: rgba(201, 154, 63, 0.4);
  transform: translateY(-2px);
}

.flash {
  padding: 0.7rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  border: 1px solid transparent;
}
.flash-error { background: rgba(180, 72, 59, 0.12); border-color: rgba(180, 72, 59, 0.4); color: #E39D91; }
.flash-success { background: rgba(31, 92, 85, 0.15); border-color: rgba(31, 92, 85, 0.5); color: #7FC9BC; }
.flash-info { background: rgba(139, 143, 156, 0.12); border-color: rgba(139, 143, 156, 0.3); color: var(--muted); }

/* Visible keyboard focus, always */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--thread);
  outline-offset: 2px;
}

.thread-path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: draw-thread 2.2s ease forwards;
}
.thread-node {
  opacity: 0;
  animation: fade-in-node 0.5s ease forwards;
}

@keyframes draw-thread {
  to { stroke-dashoffset: 0; }
}
@keyframes fade-in-node {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .thread-path { animation: none; stroke-dashoffset: 0; }
  .thread-node { animation: none; opacity: 1; }
  .card-manuscript { transition: none; }
}