/* ==============================================
   הצבעים של מסמך Markdown — הנייר והדיו — במקום אחד

   הקובץ הזה הוא מערכת הצבעים של ``#md-content``: צבע הנייר והטקסט, הטוקנים של כל ערכה (קוד בשורה,
   בלוק קוד וצבעי התחביר, ציטוט, טבלה, סימון, Mermaid), והכללים שצובעים בהם את האלמנטים ש-markdown-it
   מייצר, כולל הקישורים. שני מקומות טוענים אותו:

   - תצוגת המסמך — ``md_preview.html``, בראש הבלוק ``extra_css``, לפני ה-``<style>`` של העמוד.
   - התצוגה החיה בעמודי העריכה וההעלאה — ``_live_preview_styles.html``. במצב Markdown,
     ``setMarkdownContext`` ב-``live-preview.js`` נותן ל-canvas את ``id="md-content"``, ולכן אותם כללים
     חלים עליו בלי בורר משלו.

   **למה קובץ משותף.** עד שהקובץ הזה נוצר, הצבעים ישבו בתוך ה-``<style>`` של ``md_preview.html``, והתצוגה
   החיה החזיקה עותק קטן משלה ב-``split-view.css``, שתוכנן לרקע כהה בלבד. על רקע בהיר הדיו שלו לא היה
   קריא (המדידה ב-``docs/whats-new.rst``, 2026-10-31), ולכן הרקע של התצוגה החיה הוחזק כהה בכל ערכה.
   עכשיו יש עותק אחד, והתצוגה החיה מציגה את הנייר של המסמך.

   **מה לא כאן:** הפריסה (ריווח, פינות, גדלים) — ב-``md-content-layout.css``, שנטען באותם שני מקומות;
   ורכיבים שרק תצוגת המסמך בונה (קיפול סעיפים, הדגשת חיפוש) ובורר הרקע (``bg-sepia`` ודומיו), שנשארו
   ב-``md_preview.html``. הטוקנים של הרכיבים האלה מוצהרים כאן, יחד עם שאר הטוקנים של כל ערכה, ולכן הם
   ממשיכים להגיע אליהם.
   ============================================== */

/* הנייר. ``--md-paper-bg`` ו-``--md-paper-text`` מוצהרים על ``:root`` ולא על ``#md-content``, כי בתצוגה
   החיה גם המכל של ה-canvas (``.split-preview-content`` במצב Markdown, ב-``split-view.css``) צובע את
   עצמו בהם, והוא ההורה של ``#md-content`` — ערך שמוצהר על הילד לא מגיע אליו.
   הערכים הם בדיוק אלה שהמסמך הציג עד היום: לבן בכל ערכה שאין לה בלוק כאן (Classic, Ocean,
   Rose Pine Dawn, High Contrast), ורקע הערכה וצבע הטקסט שלה בערכות הכהות ובערכה מיובאת או משותפת. */
:root {
  --md-paper-bg: #ffffff;
  --md-paper-text: #111111;
}

:root[data-theme="dark"],
:root[data-theme="dim"],
:root[data-theme="nebula"] {
  --md-paper-bg: var(--bg-primary);
  --md-paper-text: var(--text-primary);
}

:root[data-theme="custom"],
:root[data-theme^="shared:"] {
  --md-paper-bg: var(--bg-primary, var(--md-surface, #1a1c23));
  --md-paper-text: var(--text-primary, var(--md-text, #e5eaf7));
}

#md-content {
  background: var(--md-paper-bg);
  color: var(--md-paper-text);
  --md-mark-bg: rgba(255, 191, 0, 0.3);
  --md-mark-color: #1a1a1a;
  --md-mark-border: #FFBF00;
  --md-inline-code-bg: #f6f8fa;
  --md-inline-code-border: #d0d7de;
  --md-inline-code-color: #1f2328;
  --md-code-border: #d0d7de;
  --md-code-shell-bg: #e6edf4;
  --md-code-header-bg: #e6edf4;
  --md-code-header-text: #57606a;
  --md-code-bg: #f6f8fa;
  --md-code-text: #24292f;
  --md-code-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  --md-code-copy-bg: #ffffff;
  --md-code-copy-border: #d0d7de;
  --md-code-copy-color: #57606a;
  --md-code-copy-hover-bg: #e6ebf1;
  --md-code-copy-success-color: #1a7f37;
  --md-code-copy-error-color: #b42318;
  --md-code-lang-bg: #dce3eb;
  --md-code-lang-text: #24292f;
  --hljs-text: #24292f;
  --hljs-keyword: #cf222e;
  --hljs-string: #0a3069;
  --hljs-function: #8250df;
  --hljs-comment: #6e7781;
  --hljs-number: #0550ae;
  --hljs-operator: #24292f;
  --hljs-addition-text: #1a7f37;
  --hljs-addition-bg: rgba(26, 127, 55, 0.12);
  --hljs-deletion-text: #cf222e;
  --hljs-deletion-bg: rgba(207, 34, 46, 0.15);
  --md-blockquote-bg: #eef2f7;
  --md-blockquote-border: #cbd5e1;
  --md-blockquote-color: #0f172a;
  --md-table-border: #e5e7eb;
  --md-table-header-bg: #f8fafc;
}

[data-theme="dark"] #md-content {
  --md-mark-bg: rgba(255, 191, 0, 0.3);
  --md-mark-color: #FFFFFF;
  --md-mark-border: #FFBF00;
  --md-inline-code-bg: rgba(255, 255, 255, 0.08);
  --md-inline-code-border: rgba(255, 255, 255, 0.2);
  --md-inline-code-color: #e9ecff;
  --md-code-border: rgba(255, 255, 255, 0.18);
  --md-code-shell-bg: #1f1f28;
  --md-code-header-bg: #25273a;
  --md-code-header-text: #cfd7ff;
  --md-code-bg: #1a1c23;
  --md-code-text: #e5eaf7;
  --md-code-copy-bg: #2d2f49;
  --md-code-copy-border: #3c3f60;
  --md-code-copy-color: #f8f9ff;
  --md-code-copy-hover-bg: #3b3f5c;
  --md-code-copy-success-color: #4ade80;
  --md-code-copy-error-color: #f87171;
  --md-code-lang-bg: rgba(255, 255, 255, 0.12);
  --md-code-lang-text: #f4f4ff;
  --md-code-shadow: 0 18px 30px rgba(0, 0, 0, 0.55);
  --hljs-text: #e5eaf7;
  --hljs-keyword: #c678dd;
  --hljs-string: #98c379;
  --hljs-function: #61afef;
  --hljs-comment: #5c6370;
  --hljs-number: #d19a66;
  --hljs-operator: #56b6c2;
  --hljs-addition-text: #98c379;
  --hljs-addition-bg: rgba(152, 195, 121, 0.18);
  --hljs-deletion-text: #e06c75;
  --hljs-deletion-bg: rgba(224, 108, 117, 0.22);
  --md-blockquote-bg: color-mix(in srgb, var(--bg-tertiary) 70%, rgba(255, 255, 255, 0.05));
  --md-blockquote-border: var(--glass-border);
  --md-blockquote-color: var(--text-secondary);
  --md-table-border: var(--glass-border);
  --md-table-header-bg: color-mix(in srgb, var(--bg-tertiary) 80%, rgba(255,255,255,0.08));
}

[data-theme="dim"] #md-content {
  --md-mark-bg: rgba(255, 191, 0, 0.3);
  --md-mark-color: #FFFFFF;
  --md-mark-border: #FFBF00;
  --md-inline-code-bg: rgba(236, 239, 244, 0.08);
  --md-inline-code-border: rgba(236, 239, 244, 0.18);
  --md-inline-code-color: #eceff4;
  --md-code-border: rgba(236, 239, 244, 0.1);
  --md-code-shell-bg: #2e3440;
  --md-code-header-bg: #3b4252;
  --md-code-header-text: #eceff4;
  --md-code-bg: #272c36;
  --md-code-text: #eceff4;
  --md-code-copy-bg: #39404f;
  --md-code-copy-border: #4c566a;
  --md-code-copy-color: #eceff4;
  --md-code-copy-hover-bg: #4c5568;
  --md-code-copy-success-color: #a3be8c;
  --md-code-copy-error-color: #d08770;
  --md-code-lang-bg: rgba(236, 239, 244, 0.15);
  --md-code-lang-text: #eceff4;
  --md-code-shadow: 0 20px 36px rgba(17, 24, 39, 0.65);
  --hljs-text: #eceff4;
  --hljs-keyword: #81a1c1;
  --hljs-string: #a3be8c;
  --hljs-function: #88c0d0;
  --hljs-comment: #616e88;
  --hljs-number: #b48ead;
  --hljs-operator: #ebcb8b;
  --hljs-addition-text: #a3be8c;
  --hljs-addition-bg: rgba(163, 190, 140, 0.2);
  --hljs-deletion-text: #d08770;
  --hljs-deletion-bg: rgba(208, 135, 112, 0.25);
  --md-blockquote-bg: color-mix(in srgb, var(--bg-tertiary) 70%, rgba(255, 255, 255, 0.04));
  --md-blockquote-border: color-mix(in srgb, var(--glass-border) 80%, rgba(255,255,255,0.05));
  --md-blockquote-color: var(--text-secondary);
  --md-table-border: color-mix(in srgb, var(--glass-border) 90%, rgba(255,255,255,0.05));
  --md-table-header-bg: color-mix(in srgb, var(--bg-tertiary) 80%, rgba(255,255,255,0.07));
}

[data-theme="nebula"] #md-content {
  --md-mark-bg: rgba(255, 191, 0, 0.3);
  --md-mark-color: #FFFFFF;
  --md-mark-border: #FFBF00;
  --md-inline-code-bg: rgba(248, 248, 242, 0.08);
  --md-inline-code-border: rgba(248, 248, 242, 0.2);
  --md-inline-code-color: #f8f8f2;
  --md-code-border: rgba(248, 248, 242, 0.12);
  --md-code-shell-bg: #282a36;
  --md-code-header-bg: #343746;
  --md-code-header-text: #f8f8f2;
  --md-code-bg: #242635;
  --md-code-text: #f8f8f2;
  --md-code-copy-bg: #363850;
  --md-code-copy-border: #44475a;
  --md-code-copy-color: #f8f8f2;
  --md-code-copy-hover-bg: #4b4e68;
  --md-code-copy-success-color: #50fa7b;
  --md-code-copy-error-color: #ff5555;
  --md-code-lang-bg: rgba(248, 248, 242, 0.12);
  --md-code-lang-text: #f8f8f2;
  --md-code-shadow: 0 18px 34px rgba(40, 42, 54, 0.65);
  --hljs-text: #f8f8f2;
  --hljs-keyword: #ff79c6;
  --hljs-string: #f1fa8c;
  --hljs-function: #50fa7b;
  --hljs-comment: #6272a4;
  --hljs-number: #bd93f9;
  --hljs-operator: #8be9fd;
  --hljs-addition-text: #50fa7b;
  --hljs-addition-bg: rgba(80, 250, 123, 0.18);
  --hljs-deletion-text: #ff5555;
  --hljs-deletion-bg: rgba(255, 85, 85, 0.2);
  --md-blockquote-bg: color-mix(in srgb, var(--bg-tertiary) 65%, rgba(255,255,255,0.04));
  --md-blockquote-border: color-mix(in srgb, var(--glass-border) 80%, rgba(255,255,255,0.05));
  --md-blockquote-color: var(--text-secondary);
  --md-table-border: color-mix(in srgb, var(--glass-border) 90%, rgba(255,255,255,0.05));
  --md-table-header-bg: color-mix(in srgb, var(--bg-tertiary) 78%, rgba(255,255,255,0.08));
}

:root[data-theme="rose-pine-dawn"] #md-content {
  --md-mark-bg: rgba(255, 191, 0, 0.3);
  --md-mark-color: #1a1a1a;
  --md-mark-border: #FFBF00;
  --md-inline-code-bg: rgba(244, 219, 214, 0.9);
  --md-inline-code-border: rgba(180, 99, 122, 0.4);
  --md-inline-code-color: #4a2c2a;
  --md-code-border: rgba(180, 99, 122, 0.45);
  --md-code-shell-bg: #fffaf3;
  --md-code-header-bg: #f4dbd6;
  --md-code-header-text: #42211f;
  --md-code-bg: #faf4ed;
  --md-code-text: #4a2c2a;
  --md-code-copy-bg: #ffe9ea;
  --md-code-copy-border: #f2d4d7;
  --md-code-copy-color: #b4637a;
  --md-code-copy-hover-bg: #f8dfe4;
  --md-code-copy-success-color: #286983;
  --md-code-copy-error-color: #b4637a;
  --md-code-lang-bg: #fbe8e0;
  --md-code-lang-text: #b4637a;
  --md-code-shadow: 0 16px 30px rgba(180, 99, 122, 0.25);
  --hljs-text: #575279;
  --hljs-keyword: #907aa9;
  --hljs-string: #56949f;
  --hljs-function: #286983;
  --hljs-comment: #9893a5;
  --hljs-number: #ea9d34;
  --hljs-operator: #d7827e;
  --hljs-addition-text: #56949f;
  --hljs-addition-bg: rgba(86, 148, 159, 0.18);
  --hljs-deletion-text: #b4637a;
  --hljs-deletion-bg: rgba(180, 99, 122, 0.2);
  --md-blockquote-bg: color-mix(in srgb, var(--bg-secondary) 85%, rgba(255,255,255,0.2));
  --md-blockquote-border: color-mix(in srgb, var(--glass-border) 80%, rgba(180,99,122,0.2));
  --md-blockquote-color: #4a2c2a;
  --md-table-border: color-mix(in srgb, var(--glass-border) 90%, rgba(180,99,122,0.2));
  --md-table-header-bg: color-mix(in srgb, var(--bg-secondary) 80%, rgba(255,255,255,0.3));
}

/* Custom/Shared Theme support - משתמש במשתני CSS מהערכה המותאמת */
/* Note: Using color-mix with --text-primary ensures good contrast even when --bg-tertiary is similar to --bg-primary */
[data-theme="custom"] #md-content,
[data-theme^="shared:"] #md-content {
  --md-mark-bg: color-mix(in srgb, #FFBF00 30%, transparent);
  --md-mark-color: var(--text-primary, #FFFFFF);
  --md-mark-border: #FFBF00;
  /* Inline code: mix 12% of text color into background for visible contrast */
  --md-inline-code-bg: color-mix(in srgb, var(--text-primary, #ffffff) 12%, var(--bg-primary, #1a1c23));
  --md-inline-code-border: color-mix(in srgb, var(--text-primary, #ffffff) 20%, transparent);
  /* Inline code text: mix primary accent with text for dynamic emphasis */
  --md-inline-code-color: color-mix(in srgb, var(--primary, var(--warning, #DCCC44)) 65%, var(--text-primary, #e5eaf7));
  --md-code-border: var(--glass-border, rgba(255, 255, 255, 0.18));
  /* Code blocks: use theme variables (these usually have good contrast) */
  --md-code-shell-bg: var(--bg-secondary, #1f1f28);
  --md-code-header-bg: var(--bg-tertiary, #25273a);
  --md-code-header-text: var(--text-secondary, #cfd7ff);
  --md-code-bg: color-mix(in srgb, var(--text-primary, #ffffff) 8%, var(--bg-primary, #1a1c23));
  --md-code-text: var(--code-text, var(--text-primary, #e5eaf7));
  --md-code-copy-bg: color-mix(in srgb, var(--text-primary, #ffffff) 10%, var(--bg-primary, #1a1c23));
  --md-code-copy-border: color-mix(in srgb, var(--text-primary, #ffffff) 18%, transparent);
  --md-code-copy-color: var(--text-primary, #f8f9ff);
  --md-code-copy-hover-bg: color-mix(in srgb, var(--text-primary, #ffffff) 15%, var(--bg-primary, #1a1c23));
  --md-code-copy-success-color: var(--success, #4ade80);
  --md-code-copy-error-color: var(--danger, #f87171);
  --md-code-lang-bg: color-mix(in srgb, var(--text-primary, #ffffff) 14%, var(--bg-primary, #1a1c23));
  --md-code-lang-text: var(--text-primary, #f4f4ff);
  --md-code-shadow: 0 18px 30px rgba(0, 0, 0, 0.55);
  /* export-hljs-palette:start — מכאן ועד הסימון שבסוף, הפלטה של highlight.js שנגזרת ממשתני הערכה. הייצוא ל-HTML
     מעוצב קורא את השורות האלה (``export_hljs_fallback_css`` ב-``webapp/markdown_editor.py``) לערכה שאין לה צבעי
     highlight.js משלה, כדי שהקובץ ייצבע כמו התצוגה. */
  --hljs-text: var(--text-primary, #e5eaf7);
  --hljs-keyword: var(--primary, #c678dd);
  --hljs-string: var(--success, #98c379);
  --hljs-function: var(--secondary, #61afef);
  --hljs-comment: var(--text-muted, #5c6370);
  --hljs-number: var(--warning, #d19a66);
  --hljs-operator: var(--info, #56b6c2);
  --hljs-addition-text: var(--success, #98c379);
  --hljs-addition-bg: color-mix(in srgb, var(--success, #98c379) 18%, transparent);
  --hljs-deletion-text: var(--danger, #e06c75);
  --hljs-deletion-bg: color-mix(in srgb, var(--danger, #e06c75) 22%, transparent);
  /* export-hljs-palette:end */
  /* Blockquotes: 10% mix for clear distinction */
  --md-blockquote-bg: color-mix(in srgb, var(--text-primary, #ffffff) 10%, var(--bg-primary, #1a1c23));
  --md-blockquote-border: color-mix(in srgb, var(--text-primary, #ffffff) 25%, transparent);
  --md-blockquote-color: var(--text-secondary, var(--text-primary, #b0b8d1));
  --md-table-border: color-mix(in srgb, var(--text-primary, #ffffff) 20%, transparent);
  /* Table header: 12% mix for clear distinction */
  --md-table-header-bg: color-mix(in srgb, var(--text-primary, #ffffff) 12%, var(--bg-primary, #1a1c23));
}

/* Highlight ("marker") syntax: ==text== -> <mark>text</mark> */
#md-content mark {
  background-color: var(--md-mark-bg, rgba(255, 191, 0, 0.3));
  color: var(--md-mark-color, #FFFFFF);
  border-radius: 2px;
  padding: 0 4px;
  border-bottom: 1.5px solid var(--md-mark-border, #FFBF00);
}

/* Mermaid diagrams - ensure readable colors for custom/shared themes */
[data-theme="custom"] #md-content .mermaid,
[data-theme="custom"] #md-content [class*="mermaid"],
[data-theme^="shared:"] #md-content .mermaid,
[data-theme^="shared:"] #md-content [class*="mermaid"] {
  /* Node backgrounds and text */
  --mermaid-node-bg: color-mix(in srgb, var(--text-primary, #ffffff) 15%, var(--bg-primary, #1a1c23));
  --mermaid-node-text: var(--text-primary, #e5eaf7);
  --mermaid-node-border: color-mix(in srgb, var(--text-primary, #ffffff) 30%, transparent);
}

[data-theme="custom"] #md-content .node rect,
[data-theme="custom"] #md-content .node polygon,
[data-theme="custom"] #md-content .node circle,
[data-theme^="shared:"] #md-content .node rect,
[data-theme^="shared:"] #md-content .node polygon,
[data-theme^="shared:"] #md-content .node circle {
  fill: color-mix(in srgb, var(--text-primary, #ffffff) 15%, var(--bg-primary, #1a1c23)) !important;
  stroke: color-mix(in srgb, var(--primary, var(--text-primary, #ffffff)) 50%, transparent) !important;
}

[data-theme="custom"] #md-content .node .label,
[data-theme="custom"] #md-content .nodeLabel,
[data-theme="custom"] #md-content .label,
[data-theme^="shared:"] #md-content .node .label,
[data-theme^="shared:"] #md-content .nodeLabel,
[data-theme^="shared:"] #md-content .label {
  color: var(--text-primary, #e5eaf7) !important;
  fill: var(--text-primary, #e5eaf7) !important;
}

[data-theme="custom"] #md-content .edgeLabel,
[data-theme^="shared:"] #md-content .edgeLabel {
  background-color: var(--bg-primary, #1a1c23) !important;
  color: var(--text-primary, #e5eaf7) !important;
  fill: var(--text-primary, #e5eaf7) !important;
}

[data-theme="custom"] #md-content .edgePath path,
[data-theme^="shared:"] #md-content .edgePath path {
  stroke: color-mix(in srgb, var(--text-primary, #ffffff) 40%, transparent) !important;
}

/* Sequence diagram specific */
[data-theme="custom"] #md-content .actor,
[data-theme^="shared:"] #md-content .actor {
  fill: color-mix(in srgb, var(--text-primary, #ffffff) 15%, var(--bg-primary, #1a1c23)) !important;
  stroke: color-mix(in srgb, var(--primary, var(--text-primary, #ffffff)) 50%, transparent) !important;
}

[data-theme="custom"] #md-content .actor-line,
[data-theme^="shared:"] #md-content .actor-line {
  stroke: color-mix(in srgb, var(--text-primary, #ffffff) 30%, transparent) !important;
}

[data-theme="custom"] #md-content text.actor,
[data-theme="custom"] #md-content .messageText,
[data-theme="custom"] #md-content .loopText,
[data-theme^="shared:"] #md-content text.actor,
[data-theme^="shared:"] #md-content .messageText,
[data-theme^="shared:"] #md-content .loopText {
  fill: var(--text-primary, #e5eaf7) !important;
}

[data-theme="custom"] #md-content .messageLine0,
[data-theme="custom"] #md-content .messageLine1,
[data-theme^="shared:"] #md-content .messageLine0,
[data-theme^="shared:"] #md-content .messageLine1 {
  stroke: color-mix(in srgb, var(--text-primary, #ffffff) 50%, transparent) !important;
}

[data-theme="custom"] #md-content .note,
[data-theme^="shared:"] #md-content .note {
  fill: color-mix(in srgb, var(--warning, var(--text-primary, #ffffff)) 20%, var(--bg-primary, #1a1c23)) !important;
  stroke: color-mix(in srgb, var(--warning, var(--text-primary, #ffffff)) 40%, transparent) !important;
}

[data-theme="custom"] #md-content .noteText,
[data-theme^="shared:"] #md-content .noteText {
  fill: var(--text-primary, #e5eaf7) !important;
}

[data-theme="dark"] #md-content code:not(pre code),
[data-theme="dim"] #md-content code:not(pre code),
[data-theme="nebula"] #md-content code:not(pre code) {
  background: var(--bg-tertiary);
  color: var(--code-text, var(--text-primary));
  border: 1px solid var(--code-border, var(--glass-border));
}

/* Custom/Shared theme: use color-mix for better contrast since --bg-tertiary may be too similar to --bg-primary */
[data-theme="custom"] #md-content code:not(pre code),
[data-theme^="shared:"] #md-content code:not(pre code) {
  background: color-mix(in srgb, var(--text-primary, #ffffff) 12%, var(--bg-primary, #1a1c23));
  color: var(--code-text, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--text-primary, #ffffff) 20%, transparent);
}

[data-theme="dark"] #md-content pre,
[data-theme="dim"] #md-content pre,
[data-theme="nebula"] #md-content pre {
  background: var(--code-bg, var(--bg-secondary));
  border: 1px solid var(--code-border, var(--glass-border));
}

/* Custom/Shared theme: use theme variables for code blocks */
[data-theme="custom"] #md-content pre,
[data-theme^="shared:"] #md-content pre {
  background: var(--code-bg, var(--bg-secondary, #1a1c23));
  border: 1px solid var(--code-border, var(--glass-border, rgba(255, 255, 255, 0.15)));
}

/* טבלאות */
#md-content table th, #md-content table td {
  border: 1px solid var(--md-table-border, #e5e7eb);
}
#md-content table thead {
  background: var(--md-table-header-bg, #f8fafc);
}

/* בלוק קוד (fenced) */
#md-content pre {
  background: var(--md-code-bg);
  color: var(--md-code-text);
  border: 0;
  border-top: 1px solid var(--md-code-border);
  box-shadow: var(--md-code-shadow);
}

#md-content code.hljs,
/* export-hljs-rules:start — הכללים שמחברים את מחלקות highlight.js לפלטה. הייצוא קורא גם אותם, עם בורר משלו
   במקום ``#md-content`` (``export_hljs_fallback_css``). */
#md-content pre code.hljs {
  background: transparent !important;
  color: var(--hljs-text, var(--md-code-text));
}
#md-content .hljs {
  background: transparent !important;
  color: var(--hljs-text, var(--md-code-text));
}
#md-content .hljs-comment,
#md-content .hljs-quote {
  color: var(--hljs-comment, var(--hljs-text));
  font-style: italic;
}
#md-content .hljs-keyword,
#md-content .hljs-selector-tag,
#md-content .hljs-meta .hljs-keyword,
#md-content .hljs-doctag {
  color: var(--hljs-keyword, var(--hljs-text));
}
#md-content .hljs-string,
#md-content .hljs-regexp,
#md-content .hljs-symbol,
#md-content .hljs-template-tag,
#md-content .hljs-template-variable {
  color: var(--hljs-string, var(--hljs-text));
}
#md-content .hljs-title,
#md-content .hljs-title.class_,
#md-content .hljs-title.function_,
#md-content .hljs-built_in,
#md-content .hljs-attr,
#md-content .hljs-attribute {
  color: var(--hljs-function, var(--hljs-text));
}
#md-content .hljs-number,
#md-content .hljs-literal,
#md-content .hljs-bullet {
  color: var(--hljs-number, var(--hljs-text));
}
#md-content .hljs-variable,
#md-content .hljs-params,
#md-content .hljs-operator,
#md-content .hljs-punctuation {
  color: var(--hljs-operator, var(--hljs-text));
}
#md-content .hljs-addition {
  color: var(--hljs-addition-text, var(--hljs-string, var(--hljs-text)));
  background: var(--hljs-addition-bg, transparent);
}
#md-content .hljs-deletion {
  color: var(--hljs-deletion-text, var(--hljs-keyword, var(--hljs-text)));
  background: var(--hljs-deletion-bg, transparent);
}
/* export-hljs-rules:end */

/* קוד בשורה */
#md-content code:not(pre code) {
  background: var(--md-inline-code-bg);
  color: var(--md-inline-code-color);
  border: 1px solid var(--md-inline-code-border);
}

/* קו הפרדה (``---``). עד אוקטובר 2026 לא היה לו כלל, והדפדפן צייר את ברירת המחדל שלו: קו "בולט" אפור, שעל נייר
   כהה נראה כמו פס לבן. עכשיו הוא קו דק בצבע הדיו של הנייר בשקיפות, כך שהוא עוקב אחרי כל ערכה בלי צבע משלו.
   הגובה והמרווח — ב-``md-content-layout.css``. */
#md-content hr {
  background: color-mix(in srgb, var(--md-paper-text) 22%, transparent);
}

/* ציטוטים */
#md-content blockquote {
  background: var(--md-blockquote-bg);
  border-inline-start: 4px solid var(--md-blockquote-border);
  color: var(--md-blockquote-color, inherit);
}

/* לפני כללי הקישורים, באותו סדר שבו הכלל ישב ב-``md_preview.html``. תחת ההעדפה הזו ``animations.css``
   ממילא מאפס את משך כל מעבר (``transition-duration`` ב-``!important``). */
@media (prefers-reduced-motion: reduce) {
  /* צמצם גם מעברים לקישורים ואפקט ה-::after שלהם */
  #md-content a,
  #md-content a::after { transition: none; }
}

/* עיצוב משופר לקישורים */
/* הצבע של הערכה: ``--link-color`` מוצהר בבלוק של כל ערכה מובנית (``base.html``, ו-High Contrast
   ב-``high-contrast.css``), ובערכה מיובאת הוא ``textLink.foreground`` (``services/theme_parser_service.py``).
   ``:root`` מצהיר עליו, ולכן ה-fallback ל-``--primary`` נכנס לפעולה רק אם ההצהרה שם תוסר. */
#md-content a {
  color: var(--link-color, var(--primary));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
  position: relative;
}

/* ``--primary-hover`` בערכה מיובאת הוא ``textLink.activeForeground``; בערכה שלא מצהירה עליו
   הקישור שומר על צבעו, וקו ה-``::after`` שמתרחב הוא הסימן לריחוף. */
#md-content a:hover {
  color: var(--primary-hover, var(--link-color, var(--primary)));
}

/* אפקט hover נוסף אופציונלי - קו תחתון מתרחב */
#md-content a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-50%);
}

#md-content a:hover::after {
  width: 100%;
}

/* High Contrast. ``[data-theme="high-contrast"] a`` ו-``a:hover``/``a:focus`` שב-``high-contrast.css``
   צובעים כל קישור ב-``!important``, בצבע שנבחר לרקע השחור של הערכה. הנייר של ``#md-content``
   (``--md-paper-bg`` בראש הקובץ) לבן גם בערכה הזו, והכללים שלמעלה, שאינם ``!important``, הפסידו להם — כך
   שהקישור כמעט לא נראה. בין שתי הצהרות ``!important`` מכריעה הספציפיות (MDN, "!important"), ובורר
   המזהה גובר על שלושתם, גם בריחוף ובפוקוס, בלי בורר משלו. היריבים נגזרים מקבצי הערכות ב-
   ``tests/test_md_preview_link_color.py``. */
[data-theme="high-contrast"] #md-content a {
  color: var(--link-color, var(--primary)) !important;
  text-decoration: underline !important;
}

/* קישורים בכותרות - ללא קו תחתון */
#md-content h1 a,
#md-content h2 a,
#md-content h3 a {
  border-bottom: none;
}

#md-content h1 a::after,
#md-content h2 a::after,
#md-content h3 a::after {
  display: none;
}

/* קישורי עוגן (permalink) של כותרת — הצבע בלבד. ההסתרה עד ריחוף והריווח שלהם הם פריסה, ונשארו
   ב-``md_preview.html``. */
#md-content .header-anchor {
  color: #6c757d;
}