@growth-labs/cms 0.5.26 → 0.5.27

package/src/ui/styles/broadsheet.css

@@ -1,99 +1,54 @@
-/* ============================================================
-   BROADSHEET — publishing platform UI
-   Rooted in Fronts DNA: Source Serif 4 display, DM Sans UI,
-   DM Mono micro-labels, navy + gold. Its own product identity.
-   ============================================================ */
+/* Masthead CMS compatibility layer — Growth Labs visual contract.
+ * Keep the established class vocabulary; all visual decisions resolve through
+ * growth-labs-tokens.css, imported first by ui/client/mount.tsx. */
 
 :root {
-  /* Brand constants (shared across themes) */
-  --gold: #b8941b;
-  --gold-soft: #d4b88a;
-  --premium: #8c6d14;
-
-  /* Accent — overridden live by Tweaks (JS sets these). Default ink-blue. */
-  --accent: #0c4a6e;
-  --accent-strong: #075985;
-  --accent-fg: #ffffff;
-  --accent-tint: rgba(12, 74, 110, 0.08);
-  --accent-ring: rgba(12, 74, 110, 0.35);
-
-  /* Type */
-  --serif: "Source Serif 4", Georgia, serif;
-  --ui: "DM Sans", system-ui, sans-serif;
-  --mono: "DM Mono", ui-monospace, monospace;
-
-  /* Density scale (overridden by [data-density]) */
+  --accent: var(--accent-cta);
+  --accent-strong: var(--accent-cta-active);
+  --accent-fg: var(--gl-white);
+  --accent-tint: color-mix(in srgb, var(--accent-primary) 14%, transparent);
+  --accent-ring: var(--focus-ring);
+  --serif: var(--font-display);
+  --ui: var(--font-body);
+  --mono: var(--font-mono);
+
   --row-h: 44px;
   --pad: 16px;
   --gap: 16px;
-  --radius: 10px;
-  --radius-sm: 7px;
+  --radius: var(--radius-none);
+  --legacy-radius-sm: var(--radius-control);
+  --bg: var(--surface-page);
+  --panel: var(--surface-card);
+  --panel-2: var(--surface-muted);
+  --sidebar: var(--surface-nav);
+  --sidebar-deep: var(--surface-inverse);
+  --ink: var(--text-strong);
+  --ink-soft: var(--text-primary);
+  --ink-muted: var(--text-secondary);
+  --ink-faint: var(--text-muted);
+  --border: var(--border-default);
+  --border-soft: color-mix(in srgb, var(--border-default) 42%, transparent);
+  --hairline: var(--border-default);
+  --hover: var(--surface-muted);
+  --field: var(--surface-card);
+  --field-border: var(--border-default);
+  --shadow-sm: var(--shadow-faint);
+  --shadow-md: var(--shadow-card);
+  --shadow-lg: var(--shadow-raised);
+  --green: var(--accent-primary-strong);
+  --green-tint: color-mix(in srgb, var(--accent-primary) 16%, transparent);
+  --amber: color-mix(in srgb, var(--gl-orange) 72%, var(--text-strong));
+  --amber-tint: color-mix(in srgb, var(--gl-orange) 18%, transparent);
+  --red: var(--gl-coral);
+  --red-tint: color-mix(in srgb, var(--gl-coral) 14%, transparent);
+  --blue-tint: color-mix(in srgb, var(--accent-secondary) 16%, transparent);
+  --violet: var(--gl-violet);
+  --violet-tint: color-mix(in srgb, var(--gl-violet) 16%, transparent);
 }
 
 [data-density="compact"] { --row-h: 38px; --pad: 12px; --gap: 12px; }
 [data-density="comfy"]   { --row-h: 52px; --pad: 22px; --gap: 22px; }
 
-/* ---------- LIGHT (default) ---------- */
-:root,
-[data-theme="light"] {
-  --bg: #f7f5f1;
-  --panel: #ffffff;
-  --panel-2: #fbfaf7;
-  --sidebar: #ffffff;
-  --sidebar-deep: #11151b;
-  --ink: #1a2332;
-  --ink-soft: #4a5562;
-  --ink-muted: #79828f;
-  --ink-faint: #a7adb6;
-  --border: #e7e2d9;
-  --border-soft: #efebe3;
-  --hairline: #ddd7cc;
-  --hover: #f3f0ea;
-  --field: #ffffff;
-  --field-border: #d9d3c8;
-  --shadow-sm: 0 1px 2px rgba(26, 35, 50, 0.06);
-  --shadow-md: 0 8px 24px rgba(26, 35, 50, 0.10);
-  --shadow-lg: 0 20px 60px rgba(26, 35, 50, 0.18);
-  --green: #1d7a4d;
-  --green-tint: #e4f3ea;
-  --amber: #9a6a00;
-  --amber-tint: #f8eed5;
-  --red: #c0392b;
-  --red-tint: #f8e4e1;
-  --blue-tint: #e6eef5;
-  color-scheme: light;
-}
-
-/* ---------- DARK ---------- */
-[data-theme="dark"] {
-  --bg: #0c0f14;
-  --panel: #14181f;
-  --panel-2: #11151b;
-  --sidebar: #0b0e12;
-  --sidebar-deep: #07090c;
-  --ink: #e9ecf1;
-  --ink-soft: #aeb6c2;
-  --ink-muted: #79828f;
-  --ink-faint: #565f6c;
-  --border: #232a34;
-  --border-soft: #1b212a;
-  --hairline: #2a323d;
-  --hover: #1a202a;
-  --field: #11151b;
-  --field-border: #2c343f;
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
-  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
-  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.6);
-  --green: #4ec98a;
-  --green-tint: rgba(78, 201, 138, 0.14);
-  --amber: #e0b65a;
-  --amber-tint: rgba(224, 182, 90, 0.14);
-  --red: #ef6e62;
-  --red-tint: rgba(239, 110, 98, 0.14);
-  --blue-tint: rgba(76, 154, 232, 0.14);
-  color-scheme: dark;
-}
-
 * { box-sizing: border-box; }
 
 html, body {
@@ -111,12 +66,22 @@ html, body {
 button { font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; background: none; border: 0; color: inherit; }
 input, textarea, select { font-family: inherit; }
 ::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }
+button:focus-visible,
+[role="button"]:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible,
+a:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+  box-shadow: var(--shadow-glow);
+}
 
 /* Scrollbars */
 *::-webkit-scrollbar { width: 11px; height: 11px; }
 *::-webkit-scrollbar-thumb {
   background: color-mix(in srgb, var(--ink) 18%, transparent);
-  border-radius: 8px;
+  border-radius: var(--radius-pill);
   border: 3px solid transparent;
   background-clip: padding-box;
 }
@@ -127,28 +92,27 @@ input, textarea, select { font-family: inherit; }
 .serif { font-family: var(--serif); }
 .mono { font-family: var(--mono); }
 .kicker {
-  font-family: var(--mono);
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0.14em;
+  font-family: var(--font-body);
+  font-size: 10.5px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: var(--tracking-eyebrow);
   text-transform: uppercase;
   color: var(--ink-muted);
 }
 .tnum { font-variant-numeric: tabular-nums; }
 
-/* The signature Broadsheet "masthead rule": a hairline above a heavier rule */
+/* Legacy class retained as a single Growth Labs semantic separator. */
 .masthead-rule {
   border: 0;
-  height: 3px;
-  border-top: 1px solid var(--hairline);
-  border-bottom: 2px solid var(--ink);
-  background: transparent;
+  height: 1px;
+  background: var(--border-soft);
 }
 
 /* ---------- App shell ---------- */
 .app {
   display: grid;
-  grid-template-columns: var(--sb-w, 248px) 1fr;
+  grid-template-columns: var(--sb-w, 224px) 1fr;
   height: 100%;
   overflow: hidden;
   transition: grid-template-columns 0.22s ease;
@@ -163,29 +127,29 @@ input, textarea, select { font-family: inherit; }
   flex-direction: column;
   min-height: 0;
   position: relative;
+  padding: 20px 14px;
+  gap: 20px;
 }
 .sb-brand {
   display: flex; align-items: center; gap: 11px;
-  padding: 18px 18px 14px;
+  padding: 2px 8px;
 }
 .sb-mark {
-  width: 30px; height: 30px; flex: none;
-  border-radius: 8px;
-  background: var(--ink);
-  color: #fff;
+  width: 22px; height: 22px; flex: none;
+  border-radius: var(--radius-control);
+  background: var(--gl-gradient);
+  color: var(--gl-white);
   display: grid; place-items: center;
 }
-[data-theme="dark"] .sb-mark { background: var(--accent); }
-.sb-wordmark { font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); }
-.sb-wordmark .dot { color: var(--accent); }
+.sb-wordmark { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
 
 .site-switch {
-  margin: 2px 12px 10px;
+  margin: 0 6px;
   display: flex; align-items: center; gap: 9px;
   padding: 8px 10px;
   border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--panel-2);
+  border-radius: var(--radius-control);
+  background: var(--panel);
   cursor: pointer;
   transition: border-color .15s, background .15s;
 }
@@ -194,27 +158,23 @@ input, textarea, select { font-family: inherit; }
 .site-name { font-size: 13px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .site-meta { font-size: 11px; color: var(--ink-muted); }
 
-.nav-section { padding: 6px 12px; }
+.nav-section { padding: 0; }
 .nav-label {
-  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
+  font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: var(--tracking-eyebrow);
   text-transform: uppercase; color: var(--ink-faint);
-  padding: 10px 10px 6px;
+  padding: 0 10px 8px;
 }
 .nav-item {
-  display: flex; align-items: center; gap: 11px;
-  padding: 8px 10px; border-radius: var(--radius-sm);
-  color: var(--ink-soft); font-size: 13.5px; font-weight: 500;
+  width: 100%; display: flex; align-items: center; gap: 10px;
+  padding: 8px 10px; border-radius: var(--radius-control);
+  color: var(--ink-soft); font-family: var(--font-display); font-size: 13.5px; font-weight: 500;
   cursor: pointer; user-select: none;
   transition: background .12s, color .12s;
   position: relative;
 }
 .nav-item:hover { background: var(--hover); color: var(--ink); }
-.nav-item.active { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
-[data-theme="dark"] .nav-item.active { color: var(--ink); }
-.nav-item.active::before {
-  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
-  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--accent);
-}
+.nav-item.active { background: color-mix(in srgb, var(--accent-primary) 14%, transparent); color: var(--ink); font-weight: 600; }
+.nav-item.active .ni-icon { color: var(--accent-primary-strong); }
 .nav-item .ni-icon { flex: none; color: currentColor; opacity: .9; }
 .nav-item .ni-count {
   margin-left: auto; font-family: var(--mono); font-size: 11px;
@@ -230,13 +190,13 @@ input, textarea, select { font-family: inherit; }
 [data-collapsed="true"] .sb-wordmark { display: none; }
 [data-collapsed="true"] .site-switch { justify-content: center; padding: 8px; }
 
-.sb-foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--border); }
-.sb-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; }
+.sb-foot { margin-top: auto; padding: 0; border-top: 1px solid var(--border-soft); }
+.sb-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--legacy-radius-sm); cursor: pointer; }
 .sb-user:hover { background: var(--hover); }
 .avatar {
-  width: 30px; height: 30px; border-radius: 50%; flex: none;
-  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff;
-  font-family: var(--ui);
+  width: 28px; height: 28px; border-radius: var(--radius-circle); flex: none;
+  display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--text-on-inverse);
+  font-family: var(--font-display);
 }
 
 /* ---------- Main column ---------- */
@@ -244,70 +204,73 @@ input, textarea, select { font-family: inherit; }
 .topbar {
   height: 58px; flex: none;
   display: flex; align-items: center; gap: 14px;
-  padding: 0 22px;
+  padding: 0 20px;
   border-bottom: 1px solid var(--border);
-  background: color-mix(in srgb, var(--bg) 86%, transparent);
-  backdrop-filter: blur(8px);
+  background: var(--surface-raised-nav);
+  backdrop-filter: var(--blur-panel);
   position: sticky; top: 0; z-index: 20;
 }
 .icon-btn {
-  width: 34px; height: 34px; flex: none; border-radius: 8px;
+  width: 34px; height: 34px; flex: none; border-radius: var(--radius-control);
   border: 1px solid transparent; background: transparent; color: var(--ink-soft);
   display: grid; place-items: center; transition: background .12s, color .12s, border-color .12s;
 }
 .icon-btn:hover { background: var(--hover); color: var(--ink); }
+.notification-dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: var(--radius-circle); background: var(--gl-coral); border: 1.5px solid var(--surface-raised-nav); }
+.topbar-divider { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
 
 .search {
   flex: 1; max-width: 460px;
   display: flex; align-items: center; gap: 9px;
   height: 36px; padding: 0 12px;
-  background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px;
+  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-control);
   color: var(--ink-muted); font-size: 13px;
 }
 .search input { border: 0; background: transparent; outline: none; color: var(--ink); flex: 1; font-size: 13px; }
 .search .kbd {
   font-family: var(--mono); font-size: 10px; color: var(--ink-muted);
-  border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px;
+  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1px 6px;
 }
 
 .scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
-.page { padding: 26px 30px 60px; max-width: 1280px; margin: 0 auto; }
+.page { padding: 28px 32px 60px; max-width: 1280px; margin: 0 auto; }
 .page-wide { max-width: none; }
 
 .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
-.page-title { font-family: var(--serif); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; color: var(--ink); margin: 0; line-height: 1.05; }
-.page-sub { color: var(--ink-muted); font-size: 13.5px; margin-top: 6px; }
+.page-title { font-family: var(--font-display); font-weight: 600; font-size: 27px; letter-spacing: -0.01em; color: var(--ink); margin: 0; line-height: 1.15; }
+.page-sub { color: var(--ink-muted); font-size: 13px; line-height: 1.4; margin-top: 4px; }
+.shell-state { padding: 40px; color: var(--ink-muted); }
+.shell-error-detail { margin-top: 16px; padding: 12px; font-size: 12px; color: var(--red); white-space: pre-wrap; word-break: break-word; background: var(--red-tint); border: 1px solid color-mix(in srgb, var(--red) 25%, transparent); border-radius: var(--radius-control); }
+.editor-document { width: min(780px, calc(100% - 80px)); margin: 30px auto 0; padding: 44px 90px; box-sizing: border-box; background: var(--surface-card); border: 1px solid var(--border-default); box-shadow: var(--shadow-card); }
 
 /* ---------- Buttons ---------- */
 .btn {
   display: inline-flex; align-items: center; gap: 8px; justify-content: center;
-  height: 36px; padding: 0 15px; border-radius: 9px;
-  font-size: 13px; font-weight: 600; border: 1px solid var(--field-border);
+  height: 36px; padding: 0 14px; border-radius: var(--radius-control);
+  font-family: var(--font-display); font-size: 13px; font-weight: 600; border: 1px solid var(--field-border);
   background: var(--panel); color: var(--ink); transition: all .13s ease;
   white-space: nowrap;
 }
 .btn:hover { background: var(--hover); border-color: var(--hairline); }
-.btn.sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
+.btn.sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: var(--radius-control); }
 .btn.lg { height: 42px; padding: 0 20px; font-size: 14px; }
 .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
-.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
+.btn.primary:hover { background: var(--accent-cta-hover); border-color: var(--accent-cta-hover); }
 .btn.ghost { background: transparent; border-color: transparent; }
 .btn.ghost:hover { background: var(--hover); }
-.btn.gold { background: var(--gold); border-color: var(--gold); color: #1a1402; }
-.btn.gold:hover { filter: brightness(1.06); }
 .btn.danger { color: var(--red); border-color: transparent; background: transparent; }
 .btn.danger:hover { background: var(--red-tint); }
 
 /* ---------- Panels / cards ---------- */
-.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
+.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-none); box-shadow: var(--shadow-card); }
 .panel-pad { padding: var(--pad); }
-.card-title { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--ink); letter-spacing: -0.01em; }
+.card-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--ink); }
 
 /* ---------- Status pills ---------- */
 .pill {
   display: inline-flex; align-items: center; gap: 6px;
   font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em;
-  text-transform: uppercase; padding: 3px 9px; border-radius: 20px;
+  text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-pill);
   border: 1px solid transparent; white-space: nowrap;
 }
 .pill .pdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@@ -315,7 +278,7 @@ input, textarea, select { font-family: inherit; }
 .pill.draft { color: var(--ink-muted); background: var(--hover); }
 .pill.review { color: var(--amber); background: var(--amber-tint); }
 .pill.scheduled { color: var(--accent); background: var(--accent-tint); }
-.pill.processing { color: var(--amber); background: var(--amber-tint); }
+.pill.processing { color: var(--violet); background: var(--violet-tint); }
 
 .type-tag {
   display: inline-flex; align-items: center; gap: 6px;
@@ -325,8 +288,8 @@ input, textarea, select { font-family: inherit; }
 /* ---------- Tables ---------- */
 .tbl { width: 100%; border-collapse: collapse; }
 .tbl thead th {
-  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
-  color: var(--ink-muted); font-weight: 500; text-align: left;
+  font-family: var(--font-body); font-size: 10.5px; line-height: 1; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
+  color: var(--ink-muted); font-weight: 700; text-align: left;
   padding: 0 14px 11px; border-bottom: 1px solid var(--border);
 }
 .tbl tbody td { padding: 13px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
@@ -339,7 +302,7 @@ input, textarea, select { font-family: inherit; }
 .field-label .req { color: var(--red); }
 .input, .textarea, .selectbox {
   width: 100%; background: var(--field); border: 1px solid var(--field-border);
-  border-radius: var(--radius-sm); color: var(--ink); font-size: 14px;
+  border-radius: var(--legacy-radius-sm); color: var(--ink); font-size: 14px;
   padding: 10px 12px; outline: none; transition: border-color .14s, box-shadow .14s;
 }
 .input:focus, .textarea:focus, .selectbox:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
@@ -348,13 +311,13 @@ input, textarea, select { font-family: inherit; }
 .help { font-size: 12px; color: var(--ink-muted); margin-top: 6px; line-height: 1.5; }
 
 /* segmented control */
-.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; padding: 3px; gap: 2px; }
+.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 0; gap: 0; overflow: hidden; }
 .seg button {
   border: 0; background: transparent; color: var(--ink-muted); font-size: 12.5px; font-weight: 600;
-  padding: 6px 13px; border-radius: 6px; transition: all .12s; display: inline-flex; align-items: center; gap: 7px;
+  padding: 8px 13px; border-radius: 0; transition: all .12s; display: inline-flex; align-items: center; gap: 7px;
 }
-.seg button.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-sm); }
-[data-theme="dark"] .seg button.on { background: var(--hover); }
+.seg button.on { background: var(--surface-inverse); color: var(--text-on-dark); box-shadow: none; }
+[data-theme="dark"] .seg button.on { background: var(--surface-inverse); color: var(--surface-page); }
 
 /* ---------- Misc ---------- */
 .divider { height: 1px; background: var(--border); border: 0; margin: var(--gap) 0; }
@@ -367,10 +330,22 @@ input, textarea, select { font-family: inherit; }
   .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .grid-split, .grid-split-wide { grid-template-columns: 1fr; }
 }
+@media (max-width: 900px) {
+  .editor-document { width: calc(100% - 40px); padding: 32px; }
+}
+@media (max-width: 720px) {
+  .page { padding: 20px 16px 48px; }
+  .page-head { align-items: flex-start; flex-direction: column; }
+  .grid-stats { grid-template-columns: 1fr; }
+  .topbar { padding: 0 12px; gap: 8px; }
+  .topbar .search { max-width: none; }
+  .topbar .search input, .topbar .search .kbd { display: none; }
+  .editor-document { width: calc(100% - 24px); margin-top: 16px; padding: 20px; }
+}
 .tag-chip {
   display: inline-flex; align-items: center; gap: 6px;
   font-size: 12px; color: var(--ink-soft); background: var(--panel-2);
-  border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px;
+  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px 10px;
 }
 .tag-chip .x { color: var(--ink-faint); }
 .tag-chip .x:hover { color: var(--red); }
@@ -406,16 +381,16 @@ input, textarea, select { font-family: inherit; }
 
 /* ── Typed editorial blocks (Phase 1) ──────────────────────────────────── */
 .ProseMirror div[data-callout] { border-left: 3px solid var(--accent); background: var(--panel-2); border-radius: 6px; padding: 10px 14px; margin: 1em 0; }
-.ProseMirror div[data-callout][data-tone="warning"], .ProseMirror div[data-callout][data-tone="caution"] { border-left-color: #b45309; }
-.ProseMirror div[data-callout][data-tone="tip"] { border-left-color: #15803d; }
-.ProseMirror div[data-callout][data-tone="important"] { border-left-color: #7c3aed; }
+.ProseMirror div[data-callout][data-tone="warning"], .ProseMirror div[data-callout][data-tone="caution"] { border-left-color: var(--gl-orange); }
+.ProseMirror div[data-callout][data-tone="tip"] { border-left-color: var(--accent-primary-strong); }
+.ProseMirror div[data-callout][data-tone="important"] { border-left-color: var(--gl-violet); }
 .ProseMirror figure[data-pull-quote] { border-left: 3px solid var(--ink-faint); margin: 1.5em 0; padding: 4px 18px; font-size: 1.15em; font-style: italic; color: var(--ink-soft); }
 .ProseMirror figure[data-pull-quote][data-attribution]::after { content: "— " attr(data-attribution); display: block; font-size: 0.8em; font-style: normal; color: var(--ink-faint); margin-top: 6px; }
 .ProseMirror div[data-generated-faq] { border: 1px dashed var(--border); border-radius: 6px; padding: 8px 12px; margin: 1em 0; color: var(--ink-faint); font-size: 0.85em; user-select: none; }
 .ProseMirror a[data-citation] { text-decoration: underline dotted; color: var(--accent); }
 
 /* ── Slash menu + drag handle ─────────────────────────────────────────── */
-.slash-menu { position: absolute; z-index: 90; min-width: 240px; max-height: 320px; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); padding: 4px; }
+.slash-menu { position: absolute; z-index: 90; min-width: 240px; max-height: 320px; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-control); box-shadow: var(--shadow-raised); padding: 4px; }
 .slash-menu-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; }
 .slash-menu-item.is-selected, .slash-menu-item:hover { background: var(--hover); }
 .slash-menu-title { font-size: 13px; font-weight: 600; color: var(--ink); }

package/src/ui/styles/growth-labs-tokens.css

@@ -0,0 +1,149 @@
+/* @growth-labs/cms token snapshot.
+ * Source: growthlabs-work/src/styles/ds/tokens/{colors,effects,spacing,themes,typography}.css
+ * Verified: 2026-08-21. Package-owned because growthlabs-work is not a runtime dependency. */
+
+:root {
+  --gl-mint-100: #DFFBE7;
+  --gl-mint-200: #B3FBE8;
+  --gl-aqua-300: #9AFBE9;
+  --gl-cyan-400: #50F5EC;
+  --gl-cyan-500: #46FBF5;
+  --gl-teal-400: #3ED1C6;
+  --gl-teal-500: #1FA3A8;
+  --gl-blue-400: #44C2ED;
+  --gl-blue-500: #2CA8E0;
+  --gl-coral: #F56A61;
+  --gl-coral-soft: #F89787;
+  --gl-orange: #F7A34B;
+  --gl-orange-soft: #FBB35E;
+  --gl-pink: #F0659C;
+  --gl-magenta: #F230B7;
+  --gl-purple: #8C5FD3;
+  --gl-violet: #8075ED;
+  --gl-periwinkle: #B3C5EA;
+  --gl-interactive: #2F6FBD;
+  --gl-interactive-hover: #3578C4;
+  --gl-interactive-active: #245CA8;
+  --gl-focus-ring: #1E5EA8;
+  --gl-white: #FFFFFF;
+  --gl-off-white: #F8FAFA;
+  --gl-light-gray: #F5F6F8;
+  --gl-mist: #ECF1F0;
+  --gl-mint-wash: #CFEDE8;
+  --gl-border: #D6DEE3;
+  --gl-gray: #B3B3B3;
+  --gl-text-light: #8C8C8C;
+  --gl-text: #4D4D4D;
+  --gl-charcoal: #2B2F33;
+  --gl-ink-900: #16191C;
+  --gl-ink-800: #1E2227;
+  --gl-ink-700: #262A30;
+  --gl-ink-600: #2F343A;
+  --gl-ink-500: #3A4046;
+  --gl-ink-text: #E7ECEB;
+  --gl-ink-text-soft: #A7B0B4;
+  --gl-ink-text-mute: #79838A;
+  --gl-gradient: linear-gradient(135deg, #A4F1D8 0%, #3ED1C6 50%, #2CA8E0 100%);
+  --gl-gradient-bright: linear-gradient(135deg, #DFFBE7 0%, #83FBEC 50%, #44C2ED 100%);
+  --gl-gradient-warm: linear-gradient(135deg, #F7A34B 0%, #F56A61 55%, #F0659C 100%);
+
+  --surface-page: var(--gl-mist);
+  --surface-card: var(--gl-white);
+  --surface-muted: var(--gl-light-gray);
+  --surface-inverse: var(--gl-charcoal);
+  --surface-nav: rgba(255, 255, 255, 0.82);
+  --surface-raised-nav: rgba(255, 255, 255, 0.92);
+  --text-primary: var(--gl-text);
+  --text-strong: var(--gl-charcoal);
+  --text-secondary: var(--gl-text-light);
+  --text-muted: var(--gl-gray);
+  --text-on-dark: var(--gl-white);
+  --text-on-inverse: var(--gl-white);
+  --text-accent: var(--gl-interactive);
+  --border-default: var(--gl-border);
+  --border-strong: var(--gl-gray);
+  --accent-primary: var(--gl-teal-400);
+  --accent-primary-strong: var(--gl-teal-500);
+  --accent-secondary: var(--gl-blue-500);
+  --accent-cta: var(--gl-interactive);
+  --accent-cta-hover: var(--gl-interactive-hover);
+  --accent-cta-active: var(--gl-interactive-active);
+  --accent-warm: var(--gl-coral);
+  --focus-ring: var(--gl-focus-ring);
+
+  --radius-none: 0;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-control: 6px;
+  --radius-pill: 999px;
+  --radius-circle: 50%;
+  --shadow-faint: 0 6px 14px rgba(77, 77, 77, 0.06);
+  --shadow-card: 0 8px 18px rgba(77, 77, 77, 0.08);
+  --shadow-raised: 0 14px 30px rgba(43, 47, 51, 0.12);
+  --shadow-chip: 0 10px 20px rgba(43, 47, 51, 0.10);
+  --shadow-glow: 0 0 0 6px rgba(62, 209, 198, 0.18);
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --duration-fast: 90ms;
+  --duration-base: 140ms;
+  --duration-slow: 320ms;
+  --blur-panel: blur(14px);
+  --border-thin: 1px;
+  --border-thick: 2px;
+
+  --space-0: 0;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+  --space-7: 48px;
+  --space-8: 64px;
+  --space-9: 96px;
+  --space-10: 128px;
+
+  --font-display: "Space Grotesk", "Lato", system-ui, sans-serif;
+  --font-body: "Lato", "Space Grotesk", system-ui, sans-serif;
+  --font-mono: "Space Grotesk", ui-monospace, "SF Mono", Menlo, monospace;
+  --weight-light: 300;
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --tracking-tighter: -0.02em;
+  --tracking-wide: 0.02em;
+  --tracking-eyebrow: 0.08em;
+}
+
+[data-theme="dark"],
+.gl-dark {
+  color-scheme: dark;
+  --surface-page: var(--gl-ink-800);
+  --surface-card: var(--gl-ink-700);
+  --surface-muted: var(--gl-ink-600);
+  --surface-inverse: var(--gl-mist);
+  --surface-nav: rgba(24, 27, 31, 0.82);
+  --surface-raised-nav: rgba(24, 27, 31, 0.92);
+  --text-primary: var(--gl-ink-text);
+  --text-strong: var(--gl-ink-text);
+  --text-secondary: var(--gl-ink-text-soft);
+  --text-muted: var(--gl-ink-text-mute);
+  --text-on-dark: var(--gl-ink-text);
+  --text-on-inverse: var(--gl-charcoal);
+  --text-accent: var(--gl-cyan-400);
+  --border-default: rgba(255, 255, 255, 0.12);
+  --border-strong: rgba(255, 255, 255, 0.24);
+  --accent-primary: var(--gl-teal-400);
+  --accent-primary-strong: var(--gl-cyan-400);
+  --accent-secondary: var(--gl-blue-400);
+  --accent-cta: #3F86D8;
+  --accent-cta-hover: var(--gl-blue-400);
+  --accent-cta-active: var(--gl-interactive);
+  --focus-ring: var(--gl-cyan-400);
+  --shadow-faint: 0 6px 14px rgba(0, 0, 0, 0.35);
+  --shadow-card: 0 8px 18px rgba(0, 0, 0, 0.42);
+  --shadow-raised: 0 16px 34px rgba(0, 0, 0, 0.52);
+  --shadow-chip: 0 10px 20px rgba(0, 0, 0, 0.45);
+  --shadow-glow: 0 0 0 6px rgba(62, 209, 198, 0.22);
+}