rnotes-online/src/app/globals.css

@import "tailwindcss";

@theme {
  --color-background: oklch(0.145 0.015 285);
  --color-foreground: oklch(0.95 0.01 285);
  --color-card: oklch(0.18 0.015 285);
  --color-card-foreground: oklch(0.95 0.01 285);
  --color-popover: oklch(0.18 0.015 285);
  --color-popover-foreground: oklch(0.95 0.01 285);
  --color-primary: oklch(0.72 0.14 195);
  --color-primary-foreground: oklch(0.15 0.02 285);
  --color-secondary: oklch(0.25 0.015 285);
  --color-secondary-foreground: oklch(0.9 0.01 285);
  --color-muted: oklch(0.22 0.015 285);
  --color-muted-foreground: oklch(0.65 0.015 285);
  --color-accent: oklch(0.25 0.015 285);
  --color-accent-foreground: oklch(0.9 0.01 285);
  --color-destructive: oklch(0.6 0.2 25);
  --color-destructive-foreground: oklch(0.98 0.01 285);
  --color-border: oklch(0.28 0.015 285);
  --color-input: oklch(0.28 0.015 285);
  --color-ring: oklch(0.72 0.14 195);
  --color-suggestion-insert: oklch(0.55 0.15 155);
  --color-suggestion-delete: oklch(0.55 0.15 25);
  --color-comment-highlight: oklch(0.65 0.15 85);
  --radius: 0.625rem;
}

* {
  border-color: var(--color-border);
}

body {
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-geist-sans), system-ui, sans-serif;
}

/* ─── TipTap Editor ───────────────────────────────────── */

.tiptap {
  outline: none;
  min-height: 60vh;
  padding: 2rem 0;
}

.tiptap p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--color-muted-foreground);
  pointer-events: none;
  height: 0;
}

.tiptap h1 { font-size: 2em; font-weight: 700; margin: 1em 0 0.4em; line-height: 1.2; }
.tiptap h2 { font-size: 1.5em; font-weight: 600; margin: 0.8em 0 0.3em; line-height: 1.3; }
.tiptap h3 { font-size: 1.25em; font-weight: 600; margin: 0.6em 0 0.2em; line-height: 1.4; }

.tiptap p { margin: 0.5em 0; line-height: 1.7; }

.tiptap ul,
.tiptap ol { padding-left: 1.5em; margin: 0.5em 0; }
.tiptap li { margin: 0.25em 0; }
.tiptap ul { list-style-type: disc; }
.tiptap ol { list-style-type: decimal; }

.tiptap blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: 1em;
  margin: 0.5em 0;
  color: var(--color-muted-foreground);
}

.tiptap pre {
  background: oklch(0.12 0.015 285);
  border-radius: var(--radius);
  padding: 0.75em 1em;
  margin: 0.5em 0;
  overflow-x: auto;
}

.tiptap code {
  background: oklch(0.22 0.015 285);
  border-radius: 0.25em;
  padding: 0.15em 0.4em;
  font-size: 0.9em;
  font-family: var(--font-geist-mono), monospace;
}

.tiptap pre code {
  background: none;
  padding: 0;
  border-radius: 0;
}

.tiptap hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1.5em 0;
}

.tiptap img {
  max-width: 100%;
  border-radius: var(--radius);
  margin: 0.5em 0;
}

.tiptap a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Task lists */
.tiptap ul[data-type="taskList"] {
  list-style: none;
  padding-left: 0;
}

.tiptap ul[data-type="taskList"] li {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}

.tiptap ul[data-type="taskList"] li > label {
  flex-shrink: 0;
  margin-top: 0.25em;
}

/* ─── Suggestion marks ────────────────────────────────── */

.suggestion-insert {
  background: oklch(0.55 0.15 155 / 0.2);
  border-bottom: 2px solid var(--color-suggestion-insert);
  cursor: pointer;
}

.suggestion-delete {
  background: oklch(0.55 0.15 25 / 0.2);
  text-decoration: line-through;
  border-bottom: 2px solid var(--color-suggestion-delete);
  cursor: pointer;
}

/* ─── Comment highlights ──────────────────────────────── */

.comment-highlight {
  background: oklch(0.65 0.15 85 / 0.15);
  border-bottom: 2px solid var(--color-comment-highlight);
  cursor: pointer;
}

.comment-highlight.active {
  background: oklch(0.65 0.15 85 / 0.3);
}

/* ─── Collaboration cursors ───────────────────────────── */

.collaboration-cursor__caret {
  border-left: 2px solid;
  border-right: none;
  margin-left: -1px;
  margin-right: -1px;
  pointer-events: none;
  position: relative;
  word-break: normal;
}

.collaboration-cursor__label {
  border-radius: 3px 3px 3px 0;
  font-size: 11px;
  font-weight: 600;
  left: -1px;
  line-height: 1;
  padding: 2px 6px;
  position: absolute;
  bottom: 100%;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}