attn 0.1.14

A beautiful markdown viewer that launches from the CLI
@layer components {
/* Syntax highlighting for highlight.js tokens via ProseMirror decorations.
 * hljs emits spans with classes like hljs-keyword, hljs-string, etc.
 * Colors use OKLCH to match the Paper (light) and Ink (dark) themes.
 * Theme switching uses .dark class on <html> (shadcn convention).
 *
 * Paper (light): warm hues centered around 55-78
 * Ink (dark): cool hues centered around 220-260
 */

/* ---------- Light theme (Paper) ---------- */
pre code {
    color: oklch(0.25 0.012 55);
}

.hljs-keyword {
    color: oklch(0.45 0.16 350);
}

.hljs-built_in {
    color: oklch(0.52 0.12 55);
}

.hljs-type {
    color: oklch(0.52 0.12 55);
}

.hljs-literal {
    color: oklch(0.50 0.11 65);
}

.hljs-number {
    color: oklch(0.50 0.11 65);
}

.hljs-string {
    color: oklch(0.48 0.12 155);
}

.hljs-regexp {
    color: oklch(0.48 0.12 155);
}

.hljs-comment {
    color: oklch(0.55 0.01 65);
    font-style: italic;
}

.hljs-doctag {
    color: oklch(0.55 0.01 65);
    font-style: italic;
}

.hljs-title {
    color: oklch(0.48 0.14 28);
}

.hljs-title.function_ {
    color: oklch(0.48 0.14 28);
}

.hljs-title.class_ {
    color: oklch(0.52 0.12 55);
}

.hljs-variable {
    color: oklch(0.50 0.14 25);
}

.hljs-property {
    color: oklch(0.50 0.14 25);
}

.hljs-attr {
    color: oklch(0.52 0.12 55);
}

.hljs-params {
    color: oklch(0.25 0.012 55);
}

.hljs-operator {
    color: oklch(0.48 0.10 200);
}

.hljs-punctuation {
    color: oklch(0.40 0.008 55);
}

.hljs-meta {
    color: oklch(0.48 0.14 28);
}

.hljs-symbol {
    color: oklch(0.50 0.11 65);
}

.hljs-selector-tag,
.hljs-selector-class,
.hljs-selector-id {
    color: oklch(0.50 0.14 25);
}

.hljs-addition {
    color: oklch(0.48 0.12 155);
    background-color: oklch(0.48 0.12 155 / 8%);
}

.hljs-deletion {
    color: oklch(0.50 0.14 25);
    background-color: oklch(0.50 0.14 25 / 8%);
}

.hljs-section {
    color: oklch(0.48 0.14 28);
    font-weight: bold;
}

/* ---------- Dark theme (Ink) ---------- */
.dark pre code {
    color: oklch(0.78 0.01 250);
}

.dark .hljs-keyword {
    color: oklch(0.72 0.14 310);
}

.dark .hljs-built_in {
    color: oklch(0.76 0.10 80);
}

.dark .hljs-type {
    color: oklch(0.76 0.10 80);
}

.dark .hljs-literal {
    color: oklch(0.72 0.10 60);
}

.dark .hljs-number {
    color: oklch(0.72 0.10 60);
}

.dark .hljs-string {
    color: oklch(0.72 0.10 155);
}

.dark .hljs-regexp {
    color: oklch(0.72 0.10 155);
}

.dark .hljs-comment {
    color: oklch(0.45 0.01 250);
    font-style: italic;
}

.dark .hljs-doctag {
    color: oklch(0.45 0.01 250);
    font-style: italic;
}

.dark .hljs-title {
    color: oklch(0.72 0.10 220);
}

.dark .hljs-title.function_ {
    color: oklch(0.72 0.10 220);
}

.dark .hljs-title.class_ {
    color: oklch(0.76 0.10 80);
}

.dark .hljs-variable {
    color: oklch(0.72 0.12 15);
}

.dark .hljs-property {
    color: oklch(0.72 0.12 15);
}

.dark .hljs-attr {
    color: oklch(0.76 0.10 80);
}

.dark .hljs-params {
    color: oklch(0.78 0.01 250);
}

.dark .hljs-operator {
    color: oklch(0.72 0.08 195);
}

.dark .hljs-punctuation {
    color: oklch(0.60 0.008 250);
}

.dark .hljs-meta {
    color: oklch(0.72 0.10 220);
}

.dark .hljs-symbol {
    color: oklch(0.72 0.10 60);
}

.dark .hljs-selector-tag,
.dark .hljs-selector-class,
.dark .hljs-selector-id {
    color: oklch(0.72 0.12 15);
}

.dark .hljs-addition {
    color: oklch(0.72 0.10 155);
    background-color: oklch(0.72 0.10 155 / 8%);
}

.dark .hljs-deletion {
    color: oklch(0.72 0.12 15);
    background-color: oklch(0.72 0.12 15 / 8%);
}

.dark .hljs-section {
    color: oklch(0.72 0.10 220);
    font-weight: bold;
}

}