@cosxai/ui 0.1.0

package/src/sketch/StickyNote.tsx

@@ -0,0 +1,56 @@
+import type { CSSProperties, ReactNode } from "react";
+
+// Yellow / pink / green sticky note with a tiny rotation, hand-
+// drawn second-stroke shadow, and handwriting-leaning font.
+// Useful for callouts, empty-state captions, toasts.
+
+export interface StickyNoteProps {
+  children?: ReactNode;
+  color?: "yellow" | "pink" | "green" | "blue" | "orange";
+  // Rotation in degrees. Defaults to a small alternating tilt.
+  tilt?: number;
+  width?: number | string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const COLORS: Record<NonNullable<StickyNoteProps["color"]>, string> = {
+  yellow: "#FFF3B0",
+  pink:   "#FFD1E3",
+  green:  "#D6F0DC",
+  blue:   "#D6E8FF",
+  orange: "#FFE0C7",
+};
+
+export function StickyNote({
+  children,
+  color = "yellow",
+  tilt = -2,
+  width = 220,
+  className,
+  style,
+}: StickyNoteProps) {
+  return (
+    <div
+      className={className}
+      style={{
+        background: COLORS[color],
+        width,
+        minHeight: 120,
+        padding: "18px 18px 22px",
+        border: "1.5px solid rgba(26,26,26,0.5)",
+        borderRadius: "4px 8px 5px 9px / 6px 4px 9px 5px",
+        boxShadow:
+          "3px 4px 0 rgba(26,26,26,0.85), 6px 10px 18px rgba(0,0,0,0.08)",
+        transform: `rotate(${tilt}deg)`,
+        font:
+          "500 17px/1.45 \"Caveat\", \"Patrick Hand\", \"Kalam\", \"Comic Sans MS\", cursive",
+        color: "#1A1A1A",
+        position: "relative",
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/src/sketch/index.ts

@@ -0,0 +1,4 @@
+export * from "./RoughBox";
+export * from "./StickyNote";
+export * from "./RoughArrow";
+export * from "./HandUnderline";

package/src/styles/base.css

@@ -0,0 +1,80 @@
+/* Global base — applied once at the consumer root so the kit's
+   typography, color, and motion behaviour kick in. Components
+   themselves are class-driven (`ck-*` prefix) and don't depend on
+   this file being loaded, but consumers should import it to get
+   the cross-fade theme transitions and reduced-motion handling. */
+
+html,
+body {
+  background: var(--ck-bg-canvas);
+  color: var(--ck-text-primary);
+  font-family: var(--ck-font-sans);
+  font-feature-settings: "ss01", "cv11";
+  -webkit-font-smoothing: antialiased;
+  /* Cross-fade tones when --ck-bg-canvas / --ck-text-primary flip
+     on theme toggle. All component tokens read from the same vars
+     so they shift in lockstep without per-element transitions. */
+  transition: background-color 200ms var(--ck-ease), color 200ms var(--ck-ease);
+}
+
+/* ---------- Typography utilities ---------- */
+.ck-h1 { font: 500 32px/1.2 var(--ck-font-sans); letter-spacing: -0.01em; color: var(--ck-text-primary); margin: 0; }
+.ck-h2 { font: 500 24px/1.3 var(--ck-font-sans); letter-spacing: -0.005em; color: var(--ck-text-primary); margin: 0; }
+.ck-h3 { font: 500 20px/1.4 var(--ck-font-sans); color: var(--ck-text-primary); margin: 0; }
+.ck-body    { font: 400 16px/1.55 var(--ck-font-sans); color: var(--ck-text-primary); }
+.ck-body-sm { font: 400 14px/1.5  var(--ck-font-sans); color: var(--ck-text-primary); }
+.ck-caption { font: 400 13px/1.4  var(--ck-font-sans); color: var(--ck-text-tertiary); }
+
+.ck-mono { font-family: var(--ck-font-mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
+
+/* Section eyebrow — small uppercase mono caption ("ACCESS · SHARES")
+   that sits above titles in cards / panels. */
+.ck-eyebrow {
+  font: 500 var(--ck-mono-xs-size)/1 var(--ck-font-mono);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ck-text-tertiary);
+  display: inline-block;
+}
+
+/* One-step-smaller sibling of eyebrow — for status pills (PENDING,
+   LIVE, Accepted, Revoked), meta tags inside list rows. */
+.ck-tag {
+  font: 500 var(--ck-mono-tag-size)/1 var(--ck-font-mono);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ck-text-tertiary);
+  display: inline-block;
+}
+
+.ck-meta {
+  font: 400 var(--ck-mono-sm-size)/1.4 var(--ck-font-mono);
+  color: var(--ck-text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---------- Motion primitives ---------- */
+@keyframes ck-slide-in-right { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
+@keyframes ck-slide-in-left  { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
+@keyframes ck-fade-in        { from { opacity: 0; } to { opacity: 1; } }
+@keyframes ck-popover-enter  { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
+@keyframes ck-page-enter     { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+
+.ck-anim-slide-right { animation: ck-slide-in-right 180ms var(--ck-ease) both; }
+.ck-anim-slide-left  { animation: ck-slide-in-left  180ms var(--ck-ease) both; }
+.ck-anim-fade        { animation: ck-fade-in        180ms var(--ck-ease) both; }
+.ck-anim-popover     { animation: ck-popover-enter  160ms var(--ck-ease) both; transform-origin: top center; }
+.ck-anim-page        { animation: ck-page-enter     var(--ck-dur-page) cubic-bezier(0.16, 1, 0.3, 1) both; }
+
+/* Respect the user's OS-level motion preference. Cross-fade
+   transitions on bg/colour stay (below the meaningful-motion
+   threshold); element-level animations are killed. */
+@media (prefers-reduced-motion: reduce) {
+  .ck-anim-slide-right,
+  .ck-anim-slide-left,
+  .ck-anim-fade,
+  .ck-anim-popover,
+  .ck-anim-page {
+    animation: none;
+  }
+}

package/src/styles/chrome-ambient.css

@@ -0,0 +1,222 @@
+/* Ambient Glass chrome — component overrides.
+   Tokens.css supplies the gradient backdrop + glass surface
+   tokens + Superbar gradient. This file makes every chrome
+   surface translucent with backdrop-filter blur so the ambient
+   mesh shows through, and threads the Superbar accent into the
+   places it belongs (active list items, AI input divider). */
+
+html[data-ck-chrome="ambient"] body {
+  /* Pin the ambient mesh to the viewport so it doesn't scroll
+     with content — feels like a real desktop wallpaper. */
+  background-attachment: fixed;
+  font-weight: 400;
+}
+
+/* ===== Layout chrome: glass surfaces over the mesh ============ */
+
+html[data-ck-chrome="ambient"] [data-ck-leftnav] {
+  background: var(--ck-bg-sidebar) !important;
+  backdrop-filter: var(--ck-blur-window);
+  -webkit-backdrop-filter: var(--ck-blur-window);
+  border-right: 1px solid var(--ck-border-subtle);
+}
+
+html[data-ck-chrome="ambient"] [data-ck-topbar] {
+  background: var(--ck-bg-sidebar) !important;
+  backdrop-filter: var(--ck-blur-window);
+  -webkit-backdrop-filter: var(--ck-blur-window);
+  border-bottom: 1px solid var(--ck-border-subtle);
+}
+
+/* ===== Cards ================================================= */
+
+html[data-ck-chrome="ambient"] .ck-card {
+  background: var(--ck-bg-surface);
+  border: 1px solid var(--ck-border-subtle);
+  border-radius: 16px;
+  box-shadow: var(--ck-shadow-1);
+  backdrop-filter: var(--ck-blur-window);
+  -webkit-backdrop-filter: var(--ck-blur-window);
+}
+html[data-ck-chrome="ambient"] .ck-card__head {
+  border-bottom: 1px solid var(--ck-border-subtle);
+}
+html[data-ck-chrome="ambient"] .ck-card__foot {
+  border-top: 1px solid var(--ck-border-subtle);
+  background: transparent;
+}
+
+/* ===== Buttons — soft pills, no chunky shadow ================ */
+
+html[data-ck-chrome="ambient"] .ck-btn,
+html[data-ck-chrome="ambient"] .ck-actionbar-btn {
+  border-radius: 10px;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: none;
+  transition: background var(--ck-dur-fast) var(--ck-ease),
+    border-color var(--ck-dur-fast) var(--ck-ease),
+    filter var(--ck-dur-fast) var(--ck-ease);
+}
+html[data-ck-chrome="ambient"] .ck-btn--primary {
+  background: var(--ck-accent);
+  color: #FFFFFF;
+  border: none;
+  box-shadow: var(--ck-shadow-1);
+}
+html[data-ck-chrome="ambient"] .ck-btn--primary:hover:not(:disabled) {
+  filter: brightness(1.08);
+}
+html[data-ck-chrome="ambient"] .ck-btn--secondary {
+  background: var(--ck-bg-surface);
+  border-color: var(--ck-border-subtle);
+  color: var(--ck-text-primary);
+  backdrop-filter: var(--ck-blur-window);
+}
+html[data-ck-chrome="ambient"] .ck-btn--ghost {
+  background: transparent;
+  border: none;
+}
+html[data-ck-chrome="ambient"] .ck-btn--ghost:hover:not(:disabled) {
+  background: var(--ck-bg-surface);
+}
+
+/* ===== Inputs / Textareas =================================== */
+
+html[data-ck-chrome="ambient"] .ck-input,
+html[data-ck-chrome="ambient"] .ck-textarea {
+  background: var(--ck-bg-muted);
+  border: 1px solid var(--ck-border-subtle);
+  border-radius: 10px;
+  color: var(--ck-text-primary);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+html[data-ck-chrome="ambient"] .ck-input:focus-visible,
+html[data-ck-chrome="ambient"] .ck-textarea:focus-visible {
+  outline: none;
+  border-color: var(--ck-accent-border) !important;
+  box-shadow: 0 0 0 3px var(--ck-accent-muted) !important;
+}
+
+/* ===== Typography =========================================== */
+
+html[data-ck-chrome="ambient"] h1,
+html[data-ck-chrome="ambient"] .ck-h1 {
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.05;
+}
+html[data-ck-chrome="ambient"] h2,
+html[data-ck-chrome="ambient"] .ck-h2 {
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+html[data-ck-chrome="ambient"] h3,
+html[data-ck-chrome="ambient"] .ck-h3 {
+  font-weight: 600;
+}
+
+/* ===== NavItem — active gets right-edge Superbar strip ======= */
+
+html[data-ck-chrome="ambient"] [data-ck-navitem] {
+  position: relative;
+  font-weight: 500 !important;
+  color: var(--ck-text-secondary) !important;
+  transition: background var(--ck-dur-fast) var(--ck-ease),
+    color var(--ck-dur-fast) var(--ck-ease);
+}
+html[data-ck-chrome="ambient"] [data-ck-navitem]:not([data-active="true"]) {
+  background: transparent !important;
+}
+html[data-ck-chrome="ambient"] [data-ck-navitem]:not([data-active="true"]):hover {
+  background: var(--ck-bg-surface) !important;
+  color: var(--ck-text-primary) !important;
+}
+html[data-ck-chrome="ambient"] [data-ck-navitem][data-active="true"] {
+  background: var(--ck-bg-surface) !important;
+  color: var(--ck-text-primary) !important;
+  font-weight: 600 !important;
+}
+/* The Superbar right-edge strip — signature accent. 3 px wide,
+   inset 6 px top/bottom so it doesn't kiss the border-radius. */
+html[data-ck-chrome="ambient"] [data-ck-navitem][data-active="true"]::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 6px;
+  bottom: 6px;
+  width: 3px;
+  background: var(--ck-superbar);
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+/* ===== Search trigger ====================================== */
+
+html[data-ck-chrome="ambient"] [data-ck-search-trigger] {
+  background: var(--ck-bg-muted) !important;
+  border: 1px solid var(--ck-border-subtle) !important;
+  border-radius: 10px !important;
+  backdrop-filter: var(--ck-blur-window);
+}
+
+/* ===== Tags / badges — soft tinted pills ===================== */
+
+html[data-ck-chrome="ambient"] [data-ck-tag] {
+  border-radius: 8px !important;
+  padding: 3px 10px !important;
+  font-weight: 600 !important;
+  border: 1px solid transparent !important;
+  box-shadow: none !important;
+}
+html[data-ck-chrome="ambient"] [data-ck-tag][data-tone="accent"] {
+  background: color-mix(in oklab, var(--ck-accent) 14%, transparent) !important;
+  color: var(--ck-accent) !important;
+}
+html[data-ck-chrome="ambient"] [data-ck-tag][data-tone="success"] {
+  background: color-mix(in oklab, var(--ck-success) 14%, transparent) !important;
+  color: var(--ck-success) !important;
+}
+html[data-ck-chrome="ambient"] [data-ck-tag][data-tone="warning"] {
+  background: color-mix(in oklab, var(--ck-warning) 14%, transparent) !important;
+  color: var(--ck-warning) !important;
+}
+html[data-ck-chrome="ambient"] [data-ck-tag][data-tone="critical"] {
+  background: color-mix(in oklab, var(--ck-critical) 14%, transparent) !important;
+  color: var(--ck-critical) !important;
+}
+html[data-ck-chrome="ambient"] [data-ck-tag][data-tone="neutral"] {
+  background: var(--ck-bg-muted) !important;
+  color: var(--ck-text-secondary) !important;
+}
+
+/* ===== Action bar — floating glass pill ===================== */
+
+html[data-ck-chrome="ambient"] [data-ck-actionbar] {
+  background: var(--ck-bg-sidebar) !important;
+  backdrop-filter: var(--ck-blur-overlay);
+  -webkit-backdrop-filter: var(--ck-blur-overlay);
+  border: 1px solid var(--ck-border-subtle);
+  border-radius: 24px;
+  box-shadow: var(--ck-shadow-2);
+}
+
+/* ===== Modal — heavy backdrop blur ========================== */
+
+html[data-ck-chrome="ambient"] [role="dialog"] > div:first-child {
+  background: rgba(0, 0, 0, 0.4) !important;
+  backdrop-filter: var(--ck-blur-overlay);
+  -webkit-backdrop-filter: var(--ck-blur-overlay);
+}
+html[data-ck-chrome="ambient"] [role="dialog"] > div > div {
+  border-radius: 20px;
+}
+
+/* ===== Reduced motion ====================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-ck-chrome="ambient"] * {
+    transition: none !important;
+  }
+}

package/src/styles/chrome-bento.css

@@ -0,0 +1,184 @@
+/* Bento chrome — component overrides.
+   Tokens.css supplies the neutral palette + generous radii + soft
+   multi-layer shadows. This file polishes existing primitives to
+   match: Apple-style large radius cards, soft pill buttons, no
+   chunky borders, hover-lift on cells. The layout primitives
+   (<BentoGrid> + <BentoCell>) do the heavy lifting elsewhere. */
+
+html[data-ck-chrome="bento"] body {
+  font-weight: 400;
+  font-feature-settings: "ss01", "cv11";
+}
+
+html[data-ck-chrome="bento"] h1,
+html[data-ck-chrome="bento"] .ck-h1 {
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  line-height: 1.05;
+}
+html[data-ck-chrome="bento"] h2,
+html[data-ck-chrome="bento"] .ck-h2 {
+  font-weight: 600;
+  letter-spacing: -0.015em;
+}
+html[data-ck-chrome="bento"] h3,
+html[data-ck-chrome="bento"] .ck-h3 {
+  font-weight: 600;
+  letter-spacing: -0.005em;
+}
+
+/* Buttons */
+html[data-ck-chrome="bento"] .ck-btn,
+html[data-ck-chrome="bento"] .ck-actionbar-btn {
+  border-radius: 12px;
+  font-weight: 500;
+  letter-spacing: -0.005em;
+  text-transform: none;
+  box-shadow: var(--ck-shadow-1);
+  transition: background 160ms ease, transform 160ms ease;
+}
+html[data-ck-chrome="bento"] .ck-btn--primary {
+  background: var(--ck-text-primary);
+  color: var(--ck-bg-canvas);
+  border: none;
+}
+html[data-ck-chrome="bento"] .ck-btn--primary:hover:not(:disabled) {
+  background: color-mix(in oklab, var(--ck-text-primary), white 12%);
+}
+html[data-ck-chrome="bento"] .ck-btn--secondary {
+  background: var(--ck-bg-surface);
+  color: var(--ck-text-primary);
+  border: 1px solid var(--ck-border-subtle);
+}
+html[data-ck-chrome="bento"] .ck-btn--ghost {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+html[data-ck-chrome="bento"] .ck-btn--ghost:hover:not(:disabled) {
+  background: var(--ck-bg-muted);
+}
+
+/* Inputs */
+html[data-ck-chrome="bento"] .ck-input,
+html[data-ck-chrome="bento"] .ck-textarea {
+  background: var(--ck-bg-surface);
+  border: 1px solid var(--ck-border-subtle);
+  border-radius: 12px;
+}
+html[data-ck-chrome="bento"] .ck-input:focus-visible,
+html[data-ck-chrome="bento"] .ck-textarea:focus-visible {
+  outline: none;
+  border-color: var(--ck-accent) !important;
+  box-shadow: 0 0 0 3px var(--ck-accent-muted) !important;
+}
+
+/* Cards — bento baseline */
+html[data-ck-chrome="bento"] .ck-card {
+  background: var(--ck-bg-surface);
+  border: 1px solid var(--ck-border-subtle);
+  border-radius: 22px;
+  box-shadow: var(--ck-shadow-2);
+}
+html[data-ck-chrome="bento"] .ck-card__head {
+  border-bottom: 1px solid var(--ck-border-subtle);
+  padding: 18px 24px;
+}
+html[data-ck-chrome="bento"] .ck-card__body {
+  padding: 24px;
+}
+html[data-ck-chrome="bento"] .ck-card__foot {
+  border-top: 1px solid var(--ck-border-subtle);
+  background: transparent;
+  padding: 16px 24px;
+}
+
+/* Tags — soft tinted pills */
+html[data-ck-chrome="bento"] [data-ck-tag] {
+  background: var(--ck-bg-muted) !important;
+  border-radius: 999px !important;
+  padding: 4px 10px !important;
+  font-weight: 500 !important;
+  letter-spacing: 0 !important;
+  text-transform: none !important;
+  box-shadow: none !important;
+  border: none !important;
+  font-size: 12px !important;
+}
+html[data-ck-chrome="bento"] [data-ck-tag][data-tone="accent"] {
+  background: var(--ck-accent-muted) !important;
+  color: var(--ck-accent) !important;
+}
+html[data-ck-chrome="bento"] [data-ck-tag][data-tone="success"] {
+  background: color-mix(in oklab, var(--ck-success) 12%, transparent) !important;
+  color: var(--ck-success) !important;
+}
+html[data-ck-chrome="bento"] [data-ck-tag][data-tone="warning"] {
+  background: color-mix(in oklab, var(--ck-warning) 14%, transparent) !important;
+  color: var(--ck-warning) !important;
+}
+html[data-ck-chrome="bento"] [data-ck-tag][data-tone="critical"] {
+  background: color-mix(in oklab, var(--ck-critical) 12%, transparent) !important;
+  color: var(--ck-critical) !important;
+}
+
+/* Layout chrome */
+html[data-ck-chrome="bento"] [data-ck-leftnav] {
+  background: var(--ck-bg-sidebar) !important;
+  border-right: 1px solid var(--ck-border-subtle);
+}
+html[data-ck-chrome="bento"] [data-ck-topbar] {
+  background: var(--ck-bg-canvas) !important;
+  border-bottom: 1px solid var(--ck-border-subtle);
+}
+
+/* NavItem — soft pill */
+html[data-ck-chrome="bento"] [data-ck-navitem] {
+  background: transparent !important;
+  border-radius: 10px !important;
+  font-weight: 500 !important;
+}
+html[data-ck-chrome="bento"] [data-ck-navitem]:not([data-active="true"]):hover {
+  background: var(--ck-bg-muted) !important;
+}
+html[data-ck-chrome="bento"] [data-ck-navitem][data-active="true"] {
+  background: var(--ck-bg-muted) !important;
+  color: var(--ck-text-primary) !important;
+  font-weight: 600 !important;
+}
+
+/* Search trigger */
+html[data-ck-chrome="bento"] [data-ck-search-trigger] {
+  background: var(--ck-bg-surface) !important;
+  border: 1px solid var(--ck-border-subtle) !important;
+  border-radius: 12px !important;
+  box-shadow: var(--ck-shadow-1);
+}
+
+/* Action bar */
+html[data-ck-chrome="bento"] [data-ck-actionbar] {
+  background: var(--ck-bg-surface) !important;
+  border: 1px solid var(--ck-border-subtle);
+  border-radius: 16px;
+  box-shadow: var(--ck-shadow-2);
+}
+
+/* Modal */
+html[data-ck-chrome="bento"] [role="dialog"] > div:first-child {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(8px);
+}
+html[data-ck-chrome="bento"] [role="dialog"] > div > div {
+  border-radius: 22px;
+  box-shadow: var(--ck-shadow-3);
+}
+
+/* BentoCell — hover lift signature */
+html[data-ck-chrome="bento"] [data-ck-bento-cell] {
+  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1),
+    box-shadow 240ms cubic-bezier(0.2, 0, 0, 1);
+}
+html[data-ck-chrome="bento"] [data-ck-bento-cell][data-interactive="true"]:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--ck-shadow-3);
+}

package/src/styles/chrome-editorial.css

@@ -0,0 +1,145 @@
+/* Editorial chrome — component overrides.
+   Token overrides live in tokens.css; this file restyles the
+   primitives' shape / feel to match the print-magazine brief.
+   Loads alongside index.css; takes effect only when
+   html[data-ck-chrome="editorial"] is set on the root. */
+
+html[data-ck-chrome="editorial"] body {
+  /* Optical kerning + ligatures for the editorial body type. */
+  font-feature-settings: "kern", "liga", "ss01";
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Buttons — fully rounded pills, no shadow ever. Primary is
+   coral fill with near-black text (the brief specifies dark text
+   on coral, not white). */
+html[data-ck-chrome="editorial"] .ck-btn,
+html[data-ck-chrome="editorial"] .ck-actionbar-btn {
+  height: 36px;
+  padding: 0 18px;
+  border-radius: 9999px;
+  font-family: var(--ck-font-sans);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  box-shadow: none !important;
+}
+
+html[data-ck-chrome="editorial"] .ck-btn--primary,
+html[data-ck-chrome="editorial"] .ck-actionbar-btn--primary {
+  background: var(--ck-accent);
+  color: #0F0F0F;
+}
+html[data-ck-chrome="editorial"] .ck-btn--primary:hover,
+html[data-ck-chrome="editorial"] .ck-actionbar-btn--primary:hover {
+  background: var(--ck-accent-hover);
+}
+
+html[data-ck-chrome="editorial"] .ck-btn--secondary {
+  background: transparent;
+  border: 1px solid var(--ck-text-primary);
+  color: var(--ck-text-primary);
+}
+
+/* Cards — 1 px hairline, no shadow, slightly tighter radius.
+   Index-card feel, not glassmorphism. */
+html[data-ck-chrome="editorial"] .ck-card {
+  background: var(--ck-bg-surface);
+  border: 1px solid var(--ck-border-subtle);
+  border-radius: 16px;
+  box-shadow: none;
+}
+
+/* Eyebrow / tag — editorial uses a longer track + leading
+   em-dash. Reads as a magazine section label. */
+html[data-ck-chrome="editorial"] .ck-eyebrow,
+html[data-ck-chrome="editorial"] .ck-tag {
+  letter-spacing: 0.18em;
+  font-family: var(--ck-font-sans);
+  color: var(--ck-text-secondary);
+}
+html[data-ck-chrome="editorial"] .ck-eyebrow::before {
+  content: "— ";
+  color: var(--ck-text-tertiary);
+}
+
+/* Headings switch to serif via --ck-font-display. ck-h1/h2/h3
+   already read from --ck-font-sans by default; under editorial
+   we override at this scope so the typography stack rotates
+   without touching component code. */
+html[data-ck-chrome="editorial"] h1,
+html[data-ck-chrome="editorial"] h2,
+html[data-ck-chrome="editorial"] h3,
+html[data-ck-chrome="editorial"] .ck-h1,
+html[data-ck-chrome="editorial"] .ck-h2,
+html[data-ck-chrome="editorial"] .ck-h3 {
+  font-family: var(--ck-font-display);
+  letter-spacing: -0.012em;
+  line-height: 1.08;
+  font-weight: 500;
+}
+
+/* Italic-in-the-middle treatment for the docs h1. Wrapping
+   the italicised word in <em> is enough — the serif's italic
+   variant carries the editorial signature move. */
+html[data-ck-chrome="editorial"] h1 em,
+html[data-ck-chrome="editorial"] h2 em,
+html[data-ck-chrome="editorial"] .ck-h1 em,
+html[data-ck-chrome="editorial"] .ck-h2 em {
+  font-style: italic;
+  color: var(--ck-text-primary);
+}
+
+/* Inputs — paper feel, no inner shadow, ink-coloured borders. */
+html[data-ck-chrome="editorial"] .ck-input,
+html[data-ck-chrome="editorial"] .ck-textarea {
+  background: var(--ck-bg-surface);
+  border-color: var(--ck-border-subtle);
+  font-family: var(--ck-font-sans);
+}
+
+/* Action bar — keep the pill profile but drop the shadow. The
+   bar is just a hairline-bounded paper strip floating on cream. */
+html[data-ck-chrome="editorial"] [data-ck-actionbar] {
+  background: var(--ck-bg-surface);
+  border-color: var(--ck-border-subtle);
+  box-shadow: none;
+}
+
+/* Left rail — same cream paper, hairline divider. */
+html[data-ck-chrome="editorial"] [data-ck-leftnav] {
+  background: var(--ck-bg-canvas);
+  border-right-color: var(--ck-border-subtle);
+}
+
+/* Topbar — flatten to the paper, lose the bottom border (the
+   folio rule under it is the visual divider in editorial). */
+html[data-ck-chrome="editorial"] [data-ck-topbar] {
+  background: var(--ck-bg-canvas);
+  border-bottom: none;
+}
+
+/* Modal backdrop — printerly, not glassy. Cream-tinted
+   translucent overlay instead of blue-tinted blur. */
+html[data-ck-chrome="editorial"] [role="dialog"] > div:first-child {
+  background: rgba(15, 15, 15, 0.4);
+  backdrop-filter: none;
+}
+
+/* <EditorialSpotlight>: dark canvas with cream cards floating on
+   top. The wrapper sets --ck-text-primary to cream so paragraphs
+   on the dark surround read correctly — but cards inside it stay
+   cream paper, so their text needs to flip BACK to dark ink. Rebind
+   the text variables on the .ck-card scope and everything nested
+   inside (h1/h2, body copy, eyebrows, captions) reads dark again. */
+[data-ck-spotlight] .ck-card {
+  --ck-text-primary: #0F0F0F;
+  --ck-text-secondary: #6B6557;
+  --ck-text-tertiary: #A8A294;
+  color: #0F0F0F;
+}
+[data-ck-spotlight] .ck-card .ck-eyebrow,
+[data-ck-spotlight] .ck-card .ck-tag {
+  color: var(--ck-text-secondary);
+}