/* WritePlainly v2 — redesign tokens
   White canvas · ink accent · system type · softened verdict colors
   Source: docs/designs/redesign-v2/project/redesign/wp-tokens.css (Claude Design, chat12)
   Loaded only by templates extending base_v2.html.twig — legacy cp-* surfaces keep css/tokens.css. */

:root {
  --bg:            #FFFFFF;
  --bg-sidebar:    #F7F7F8;
  --bg-subtle:     #F4F4F5;
  --bg-hover:      rgba(17, 17, 20, 0.045);
  --hairline:      rgba(17, 17, 20, 0.10);
  --hairline-soft: rgba(17, 17, 20, 0.06);

  --ink:   #1B1B1F;
  --ink-2: #5A5A63;
  --ink-3: #8E8E96;

  --accent:    #111114;
  --on-accent: #FFFFFF;

  /* Verdict tiers — softened, modern */
  --good:      #1E9E5F;  --good-bg:   #E8F6EE;
  --nearly:    #C9930A;  --nearly-bg: #FBF3DC;
  --revise:    #D9772E;  --revise-bg: #FBEFE3;
  --risk:      #DE4B4F;  --risk-bg:   #FCECEC;

  /* Severity ladder */
  --sev-critical: #DE4B4F;  --sev-critical-bg: #FCECEC;
  --sev-major:    #C9930A;  --sev-major-bg:    #FBF3DC;
  --sev-moderate: #5F6470;  --sev-moderate-bg: #EFF0F2;
  --sev-minor:    #9094A0;  --sev-minor-bg:    #F3F4F6;

  --font-ui:   -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --radius-s: 7px;
  --radius:   10px;
  --radius-l: 14px;

  --shadow-pop:   0 8px 30px rgba(17,17,20,0.10), 0 2px 8px rgba(17,17,20,0.06);
  --shadow-modal: 0 24px 70px rgba(17,17,20,0.18), 0 4px 16px rgba(17,17,20,0.08);

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

html, body { margin: 0; height: 100%; background: var(--bg); }
body.wp {
  font-family: var(--font-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
}
body.wp * { box-sizing: border-box; }

body.wp ::-webkit-scrollbar { width: 10px; height: 10px; }
body.wp ::-webkit-scrollbar-thumb { background: rgba(17,17,20,0.14); border-radius: 5px; border: 3px solid transparent; background-clip: content-box; }
body.wp ::-webkit-scrollbar-track { background: transparent; }

body.wp button { font-family: var(--font-ui); }

/* ── Buttons ── */
.wp-btn {
  appearance: none; border: 0; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
  padding: 0 16px; height: 32px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none;
  transition: filter 0.15s var(--ease), transform 0.1s var(--ease), opacity 0.15s;
}
.wp-btn:hover { filter: brightness(1.35); }
.wp-btn:active { transform: scale(0.98); }
.wp-btn:disabled { opacity: 0.45; cursor: default; filter: none; }
.wp-btn.wp-sm { height: 28px; padding: 0 13px; font-size: 12px; }

.wp-btn-ghost {
  appearance: none; cursor: pointer;
  background: transparent; color: var(--ink);
  border: 1px solid var(--hairline);
  font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
  padding: 0 14px; height: 32px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none;
  transition: background 0.15s var(--ease);
}
.wp-btn-ghost:hover { background: var(--bg-hover); }
.wp-btn-ghost.wp-sm { height: 28px; padding: 0 12px; font-size: 12px; }

.wp-iconbtn {
  appearance: none; border: 0; cursor: pointer; background: transparent;
  width: 30px; height: 30px; border-radius: var(--radius-s);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2); transition: background 0.15s var(--ease), color 0.15s;
}
.wp-iconbtn:hover { background: var(--bg-hover); color: var(--ink); }

/* ── Editor inline marks ── */
.wp-mark {
  border-bottom: 2px solid var(--msev);
  border-radius: 2px; cursor: pointer; padding-bottom: 1px;
  transition: background 0.15s var(--ease);
}
.wp-mark:hover, .wp-mark.wp-on { background: var(--msev-bg); }
.wp-sev-critical { --msev: var(--sev-critical); --msev-bg: var(--sev-critical-bg); }
.wp-sev-major    { --msev: var(--sev-major);    --msev-bg: var(--sev-major-bg); }
.wp-sev-moderate { --msev: var(--sev-moderate); --msev-bg: var(--sev-moderate-bg); }
.wp-sev-minor    { --msev: var(--sev-minor);    --msev-bg: var(--sev-minor-bg); }

.wp-fixedflash { animation: wpFlash 1.4s var(--ease) 1; border-radius: 2px; }
@keyframes wpFlash { 0% { background: var(--good-bg); } 100% { background: transparent; } }

/* ── Panel rows ── */
.wp-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 0 6px 0 8px;
  background: transparent; border: 0; border-radius: var(--radius-s);
  cursor: pointer; text-align: left; color: var(--ink);
  text-decoration: none;
  transition: background 0.15s var(--ease);
}
.wp-row:hover { background: var(--bg-hover); }
.wp-row + .wp-row { position: relative; }

.wp-hairline-rows > * { border-bottom: 1px solid var(--hairline-soft); }
.wp-hairline-rows > *:last-child { border-bottom: 0; }

/* ── Motion ── */
.wp-slide-r { animation: wpSlideR 0.24s var(--ease); }
.wp-slide-l { animation: wpSlideL 0.24s var(--ease); }
.wp-fade-up { animation: wpFadeUp 0.3s var(--ease); }
@keyframes wpSlideR { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes wpSlideL { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes wpFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.wp-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--hairline); border-top-color: var(--ink-2);
  animation: wpSpin 0.7s linear infinite;
}
@keyframes wpSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .wp-slide-r, .wp-slide-l, .wp-fade-up, .wp-fixedflash { animation: none; }
}

/* ── Editor prose ── */
.wp-prose { font-size: var(--prose-size, 17px); line-height: 1.78; color: var(--ink); letter-spacing: -0.003em; }
.wp-prose p { margin: 0 0 1.1em; }
.wp-prose:focus { outline: none; }
.wp-doc-title {
  font-size: 28px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.25;
  margin: 0 0 6px; color: var(--ink); outline: none;
}

/* ── Misc ── */
.wp-kbd {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3);
  border: 1px solid var(--hairline); border-radius: 4px; padding: 1px 5px;
  background: var(--bg);
}
.wp-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  font-size: 11px; font-weight: 600; font-family: var(--font-mono);
}

/* ── Focus visibility (production a11y addition; prototype relied on defaults) ── */
body.wp :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 3px;
}
.wp-btn:focus-visible { outline-offset: 3px; }