/* The colours a writer may put on a word, resolved per theme.
 *
 * `core.fields.PROSE_TEXT_COLORS` / `PROSE_HIGHLIGHTS` name them and the
 * sanitizer lets nothing else through; this file is the only place that
 * says what each name *looks* like. That split is the point: a note
 * written in a lit office is read on a dark screen in the hall, so the
 * colour has to be the reader's answer and not the writer's (CLAUDE.md
 * #18). Loaded by the portal and by the admin alike, so prose looks the
 * same wherever it is written or read.
 *
 * Light values first on bare `:root`; the dark side overrides only the
 * variables. Both the editing surface (.ProseMirror) and the reading
 * surface (.prose-content, and the admin's own) get them, or a colour
 * would appear on the way in and vanish on the way out. */
:root {
  --prose-red: #B91C1C;
  --prose-orange: #C2410C;
  --prose-green: #15803D;
  --prose-blue: #1D4ED8;
  --prose-violet: #6D28D9;
  --prose-grey: #6B7280;

  --prose-mark-yellow: #FDE68A;
  --prose-mark-green: #BBF7D0;
  --prose-mark-blue: #BFDBFE;
  --prose-mark-pink: #FBCFE8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --prose-red: #F87171;
    --prose-orange: #FB923C;
    --prose-green: #4ADE80;
    --prose-blue: #60A5FA;
    --prose-violet: #A78BFA;
    --prose-grey: #9CA3AF;

    --prose-mark-yellow: #A16207;
    --prose-mark-green: #15803D;
    --prose-mark-blue: #1D4ED8;
    --prose-mark-pink: #BE185D;
  }
}

:root[data-theme="dark"] {
  --prose-red: #F87171;
  --prose-orange: #FB923C;
  --prose-green: #4ADE80;
  --prose-blue: #60A5FA;
  --prose-violet: #A78BFA;
  --prose-grey: #9CA3AF;

  --prose-mark-yellow: #A16207;
  --prose-mark-green: #15803D;
  --prose-mark-blue: #1D4ED8;
  --prose-mark-pink: #BE185D;
}

.prose-color-red { color: var(--prose-red); }
.prose-color-orange { color: var(--prose-orange); }
.prose-color-green { color: var(--prose-green); }
.prose-color-blue { color: var(--prose-blue); }
.prose-color-violet { color: var(--prose-violet); }
.prose-color-grey { color: var(--prose-grey); }

.prose-mark-yellow,
.prose-mark-green,
.prose-mark-blue,
.prose-mark-pink {
  /* No foreground of its own: the wash is chosen per theme so the text
     already on the page stays legible over it, and a highlight can then
     be combined with a colour instead of fighting it. Padding stays
     inside the line box -- an inline background that grows the line
     would push the rows of a paragraph apart. */
  border-radius: 0.1875rem;
  padding: 0 0.15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.prose-mark-yellow { background-color: var(--prose-mark-yellow); }
.prose-mark-green { background-color: var(--prose-mark-green); }
.prose-mark-blue { background-color: var(--prose-mark-blue); }
.prose-mark-pink { background-color: var(--prose-mark-pink); }