/* Crestmas Write — brand tokens sampled from the Crestmas Hub logo */
:root {
  --cw-purple-900: #2a0a66;
  --cw-purple-700: #3d0c93;
  --cw-purple-600: #5714be;
  --cw-purple-500: #6d28d9;
  --cw-purple-100: #efe7fb;
  --cw-purple-50:  #f8f5fe;
  --cw-gold-500:   #fcd300;
  --cw-gold-600:   #e0a800;
  --cw-rose-gold:  #dfaf73;
  --cw-ink:        #1b1340;
  --cw-ink-soft:   #4b4570;
  --cw-bg:         #fbfaff;
  --cw-card:       #ffffff;
  --cw-border:     #e5defa;
  --cw-ok:         #0f7b4f;
  --cw-warn:       #b45309;
  --cw-err:        #b42318;
  --cw-radius:     16px;
  --cw-shadow:     0 6px 24px rgba(61, 12, 147, .08);
  --bs-primary: var(--cw-purple-600);
  --bs-primary-rgb: 87, 20, 190;
  --bs-body-color: var(--cw-ink);
  --bs-body-bg: var(--cw-bg);
  --bs-link-color: var(--cw-purple-600);
  --bs-link-hover-color: var(--cw-purple-700);
  --bs-border-radius: 12px;
}

body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--cw-ink); background: var(--cw-bg); }
h1, h2, h3, h4 { color: var(--cw-ink); letter-spacing: -.01em; }

.btn-primary { --bs-btn-bg: var(--cw-purple-600); --bs-btn-border-color: var(--cw-purple-600);
  --bs-btn-hover-bg: var(--cw-purple-700); --bs-btn-hover-border-color: var(--cw-purple-700);
  --bs-btn-active-bg: var(--cw-purple-900); --bs-btn-active-border-color: var(--cw-purple-900); }
.btn-outline-primary { --bs-btn-color: var(--cw-purple-600); --bs-btn-border-color: var(--cw-purple-600);
  --bs-btn-hover-bg: var(--cw-purple-600); --bs-btn-hover-border-color: var(--cw-purple-600);
  --bs-btn-active-bg: var(--cw-purple-600); --bs-btn-active-border-color: var(--cw-purple-600); --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 87, 20, 190; }
.btn-accent { background: var(--cw-gold-500); border: 1px solid var(--cw-gold-600); color: var(--cw-purple-900); font-weight: 600; }
.btn-accent:hover { background: var(--cw-gold-600); color: #fff; }

.cw-card { background: var(--cw-card); border: 1px solid var(--cw-border); border-radius: var(--cw-radius); box-shadow: var(--cw-shadow); }
.cw-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--cw-purple-700); text-decoration: none; }
.cw-brand img { width: 38px; height: 38px; }
.cw-brand small { display: block; font-weight: 500; font-size: .7rem; color: var(--cw-ink-soft); line-height: 1; }
.cw-hero { background: linear-gradient(160deg, var(--cw-purple-50) 0%, #fff 55%, #fff8dc 100%); }
.cw-pill { display: inline-block; padding: .2rem .7rem; border-radius: 999px; background: var(--cw-purple-100); color: var(--cw-purple-700); font-size: .8rem; font-weight: 600; }
:focus-visible { outline: 3px solid var(--cw-gold-500); outline-offset: 2px; }

/* Workspace */
.cw-workspace { display: grid; grid-template-columns: 260px minmax(0, 1fr) 320px; gap: 1rem; }
.cw-editor { width: 100%; min-height: 340px; display: block; border: 1px solid var(--cw-border); border-radius: 12px; padding: 1rem; font-size: 1.02rem; line-height: 1.65; resize: vertical; background: #fff; }
.cw-output { min-height: 340px; border: 1px solid var(--cw-border); border-radius: 12px; padding: 1rem; background: var(--cw-purple-50); line-height: 1.65; white-space: pre-wrap; }
.cw-diff ins { background: #d9f5e6; color: #0b5d3b; text-decoration: none; border-radius: 3px; padding: 0 2px; }
.cw-diff del { background: #fde3e0; color: #8f1d12; border-radius: 3px; padding: 0 2px; }
.cw-diff .prot { background: #fff3c4; border-radius: 3px; padding: 0 2px; }
@media (max-width: 991.98px) { .cw-workspace { grid-template-columns: 1fr; } }