/*
 * Espresso Dark Theme for highlight.js
 * Dark warm-brown code blocks — contrasts with the Cream Warm page background.
 *
 * Design concept: "inversion" — สีพื้นหน้า (#EFE6D9 Cream) กลายเป็นสีตัวอักษรโค้ด
 *                               และสีตัวอักษรหน้า (#4A3B2E Espresso) ถูกนำมาทำ
 *                               พื้นหลังโค้ดในเฉดที่เข้มกว่ามาก (#2D1B09 Deep Espresso)
 *
 * Dark palette (code block):
 *   #2D1B09  Deep Espresso – code background (warm dark, ไม่ใช่ cold black)
 *   #3D2810  Roast Brown   – formula / diff backgrounds
 *   #EFE6D9  Cream         – default code text (inversion ของพื้นหน้า)
 *   #9E8C7A  Warm Muted    – comments
 *
 * Syntax colors (bright/warm — readable on dark bg):
 *   #FF6B5B  Warm Red      – keywords
 *   #C8D44E  Yellow-Green  – functions, built-ins
 *   #FFD060  Warm Amber    – strings
 *   #E8A8C0  Warm Pink     – numbers, symbols
 *   #7EC8D8  Light Teal    – variables, params
 *   #98D480  Mint Green    – regexp, tags
 *   #FFB060  Golden Orange – operators, template tags
 *   #FFD060  Amber         – meta, doctags
 */

.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em;
    background-color: #2d1b09; /* Deep Espresso — ตัดกับ cream page อย่างชัดเจน */
    color: #efe6d9; /* Cream — inversion ของพื้นหน้า */
    border-radius: 8px;
}

/* ── Comments ─────────────────────────────────────────────────────────── */
.hljs-comment,
.hljs-quote {
    color: #9e8c7a; /* Warm Muted — น้ำหนักเบา อ่านได้แต่ไม่แย่ง focus */
    font-style: italic;
}

/* ── Keywords, literals ───────────────────────────────────────────────── */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-type,
.hljs-section,
.hljs-link {
    color: #ff6b5b; /* Warm Red — สว่างพอบนพื้นเข้ม */
    font-weight: bold;
}

/* ── Function names, built-in ─────────────────────────────────────────── */
.hljs-function,
.hljs-title,
.hljs-built_in,
.hljs-class .hljs-title {
    color: #c8d44e; /* Yellow-Green — warm, readable on dark */
}

/* ── Strings ──────────────────────────────────────────────────────────── */
.hljs-string,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-attr {
    color: #ffd060; /* Warm Amber — สีทองอบอุ่น */
}

/* ── Numbers, symbols ─────────────────────────────────────────────────── */
.hljs-number,
.hljs-symbol,
.hljs-bullet {
    color: #e8a8c0; /* Warm Pink */
}

/* ── Variables, parameters ────────────────────────────────────────────── */
.hljs-variable,
.hljs-template-variable,
.hljs-attribute,
.hljs-tag .hljs-attr,
.hljs-params {
    color: #7ec8d8; /* Light Teal */
}

/* ── Regular expressions, meta strings ───────────────────────────────── */
.hljs-regexp,
.hljs-meta .hljs-string {
    color: #98d480; /* Mint Green */
}

/* ── Tags (HTML/XML), selectors ──────────────────────────────────────── */
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
    color: #98d480; /* Mint Green */
}

/* ── Deletion ─────────────────────────────────────────────────────────── */
.hljs-deletion {
    color: #ff6b5b; /* Warm Red */
    background-color: #4a1810; /* Dark Red bg */
}

/* ── Addition ─────────────────────────────────────────────────────────── */
.hljs-addition {
    color: #c8d44e; /* Yellow-Green */
    background-color: #1a3a10; /* Dark Green bg */
}

/* ── Meta, doctags ────────────────────────────────────────────────────── */
.hljs-meta,
.hljs-doctag {
    color: #ffd060; /* Warm Amber */
}

/* ── Operators, properties ────────────────────────────────────────────── */
.hljs-operator,
.hljs-property {
    color: #ffb060; /* Golden Orange */
}

/* ── Template tags ────────────────────────────────────────────────────── */
.hljs-template-tag {
    color: #ffb060; /* Golden Orange */
}

/* ── Emphasis / Strong ────────────────────────────────────────────────── */
.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: bold;
}

/* ── Selector pseudo ──────────────────────────────────────────────────── */
.hljs-selector-pseudo {
    color: #e8a8c0; /* Warm Pink */
}

/* ── Subst ────────────────────────────────────────────────────────────── */
.hljs-subst {
    color: #efe6d9; /* Cream */
}

/* ── Formula ──────────────────────────────────────────────────────────── */
.hljs-formula {
    background-color: #3d2810; /* Roast Brown — เข้มกว่า bg นิดหน่อย */
    font-style: italic;
}