/* ============================================================
   WRITEBROS — Manuscript theme (warm editorial on Circle foundations)
   Shared by the redesign canvas and the user-flows canvas.
   ============================================================ */
:root {
  --wb-paper:       #F3EEE4;   /* warm cream field (matches the Desk) */
  --wb-paper-deep:  #EAE2D3;
  --wb-sheet:       #FBF8F2;   /* card surface near-white */
  --wb-ink:         #2B2722;   /* near-black ink */
  --wb-ink-72:      rgba(43, 39, 34, 0.72);
  --wb-ink-55:      rgba(43, 39, 34, 0.55);
  --wb-ink-38:      rgba(43, 39, 34, 0.38);
  --wb-ink-14:      rgba(43, 39, 34, 0.14);
  --wb-ink-08:      rgba(43, 39, 34, 0.08);
  --wb-purple:      #6D5BD0;   /* brand accent — voice/identity */
  --wb-purple-deep: #5848B0;
  --wb-purple-soft: rgba(109, 91, 208, 0.10);
  --wb-purple-whisper: #F0EDFb;
  --wb-jelly:       #9F72FF;
  --wb-rust:        #C15F3C;   /* copyeditor marks */
  --wb-rust-soft:   rgba(193, 95, 60, 0.12);
  --wb-green:       #3F7A4F;   /* "reads human" */
  --wb-green-soft:  #E4EEE3;
  --wb-amber:       #B07A2E;   /* pending */
  --wb-amber-soft:  #F2E6CF;
  --wb-blue:        #2D6CDF;
  --wb-blue-soft:   rgba(45, 108, 223, 0.10);
  --wb-serif: "Newsreader", "Georgia", serif;
  --wb-sans: "Circular XX", "Helvetica Neue", system-ui, sans-serif;
  --wb-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --wb-shadow-sheet: 0 1px 2px rgba(43,39,34,0.05), 0 12px 40px rgba(43,39,34,0.07);
  --wb-shadow-lift: 0 2px 8px rgba(43,39,34,0.06), 0 24px 64px rgba(43,39,34,0.10);
}

.wb { font-family: var(--wb-sans); color: var(--wb-ink); font-weight: 400; -webkit-font-smoothing: antialiased; }
.wb *, .wb *::before, .wb *::after { box-sizing: border-box; }
.wb p { margin: 0; }
.wb h1, .wb h2, .wb h3, .wb h4 { margin: 0; font-weight: inherit; }

.wb-serif { font-family: var(--wb-serif); }
.wb-mono-t { font-family: var(--wb-mono); }
.wb-label {
  font-family: var(--wb-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--wb-ink-55);
}
.wb-eyebrow {
  font-family: var(--wb-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--wb-ink-55);
}
.wb-eyebrow.rust { color: var(--wb-rust); }
.wb-eyebrow.purple { color: var(--wb-purple); }

/* paper grain */
.wb-grain { position: relative; }
.wb-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.55 0 0 0 0 0.51 0 0 0 0 0.44 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wb-grain > * { position: relative; z-index: 1; }

/* ruled paper */
.wb-ruled {
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent 31px, rgba(43,39,34,0.055) 31px, rgba(43,39,34,0.055) 32px);
}

/* buttons */
.wb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--wb-sans); font-size: 15px; font-weight: 500; line-height: 1;
  padding: 14px 24px; border-radius: 10px; border: none; cursor: pointer;
  text-decoration: none; transition: background 180ms, color 180ms;
}
.wb-btn.ink { background: var(--wb-ink); color: var(--wb-sheet); }
.wb-btn.purple { background: var(--wb-purple); color: #fff; }
.wb-btn.ghost { background: transparent; color: var(--wb-ink); box-shadow: inset 0 0 0 1.5px var(--wb-ink-14); }
.wb-btn.sm { font-size: 13.5px; padding: 10px 18px; border-radius: 8px; gap: 7px; }
.wb-btn.disabled { opacity: 0.42; cursor: default; }

.wb-sheet {
  background: var(--wb-sheet); border: 1px solid var(--wb-ink-08);
  border-radius: 14px; box-shadow: var(--wb-shadow-sheet);
}
.wb-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
  border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
}
.wb-stamp {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--wb-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 7px 14px; border-radius: 4px; border: 1.5px solid currentColor;
}
.wb-stamp.green { color: var(--wb-green); transform: rotate(2deg); }
.wb-navlink { font-size: 14px; font-weight: 450; color: var(--wb-ink-72); text-decoration: none; }
.wb svg.lucide { stroke-width: 1.8; }