/** Code Syntax Highlighting
 * Color scheme and styling for inline code and code blocks
 */

:root {
    /* Typography */
    --code-font-family:          var(--font-family-mono);
    --code-font-size:            1em;
    --code-line-height:          1.3;
    --code-output-line-height:   1.1;

    /* Base colors */
    --code-color-back:          #0e0f11;

    --code-color-normal:        #cdd3df;
    --code-color-bright:        #ABB2BF;
    --code-color-muted:         #7F848E;
    --code-color-dark:          #3f4146;
    --code-color-darker:        #232325;

    /* Palette */
    --code-color-red:           #e18c8c;
    --code-color-orange:        #e3b489;
    --code-color-yellow:        #dfda87;
    --code-color-green:         #aee387;
    --code-color-sage:          #79dbb5;
    --code-color-cyan:          #81e0e3;
    --code-color-blue:          #75a5e0;
    --code-color-purple:        #b28adf;
    --code-color-pink:          #e79cce;

    /* Editor UI */
    --code-active-line-back:    color-mix(in srgb, var(--code-color-normal) 20%, transparent);
    --code-selection-back:      color-mix(in srgb, var(--theme-color) 40%, transparent);
    --code-matching-color:      var(--color-important);
    --code-matching-back:       color-mix(in srgb, var(--code-matching-color) 10%, transparent);

    --code-warning-color:       var(--color-important);
    --code-error-color:         var(--color-attention);

    --code-high-mark:           var(--theme-color);
    --code-high-back:           color-mix(in srgb, var(--code-high-mark) 20%, transparent);

    --code-popup-color:          var(--code-color-normal);
    --code-popup-back-color:     var(--code-color-darker);
    --code-popup-active-color:   var(--code-color-dark);
    --code-border-color:         var(--code-color-dark);

    --code-control-color:        var(--code-color-muted);
    --code-control-color--high:  var(--code-color-normal);
    --code-control-back-color:   var(--code-color-back);
    --code-control-info-color:   var(--code-color-muted);

    --code-fg-color:             var(--code-color-normal);
    --code-bg-color:             var(--code-color-back);

    /* Syntax highlighting colors */
    --code-hl-number-color:      var(--code-color-orange);
    --code-hl-special-color:     var(--code-color-sage);
    --code-hl-function-color:    var(--code-color-blue);
    --code-hl-doctype-color:     var(--code-color-purple);
    --code-hl-tag-color:         var(--code-color-blue);
    --code-hl-constant-color:    var(--code-color-red);
    --code-hl-keyword-color:     var(--code-color-purple);
    --code-hl-string-color:      var(--code-color-green);
    --code-hl-name-color:        var(--code-color-red);
    --code-hl-operator-color:    var(--code-color-cyan);
    --code-hl-punctuation-color: var(--code-color-bright);
    --code-hl-comment-color:     var(--code-color-muted);
    --code-hl-attribute-color:   var(--code-color-yellow);
    --code-hl-property-color:    var(--code-color-blue);
    --code-hl-parameter-color:   var(--code-color-red);
    --code-hl-selector-color:    var(--code-color-red);
    --code-hl-interpol-color:    var(--code-color-pink);
    --code-hl-atrule-color:      var(--code-color-normal);
    --code-hl-rule-color:        var(--code-color-purple);
    --code-hl-generic-color:     var(--code-color-bright);
    --code-hl-variable-color:    var(--code-color-bright);
    --code-hl-type-color:        var(--code-color-yellow);
    --code-hl-url-color:         var(--code-color-cyan);
    --code-hl-new-color:         var(--code-color-green);
    --code-hl-alert-color:       var(--code-color-red);

    --code-hl-color:             var(--code-high-mark);
    --code-hl-color--light:      var(--code-high-back);
}

/* Base styling for code elements */
.markdown-section code[class*="language-"],
.markdown-section pre[class*="language-"],
.markdown-section .code-output,
.markdown-section code:not([class*="lang-"]):not([class*="language-"]),
.markdown-section :not(pre) > code[class*="language-"] {
    color: var(--code-fg-color);
    background-color: var(--code-bg-color);
    font-family: var(--code-font-family);
    font-optical-sizing: auto;
    word-break: normal;
    font-size: var(--code-font-size);
    font-weight: normal;
    line-height: var(--code-line-height);
    direction: ltr;
    text-align: left;
    /* white-space: pre-wrap;
    word-break: break-all; */
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

/* Block and inline code containers */
.markdown-section pre[class*="language-"] {
    margin: 0.5em 0;
    overflow: auto;
    border-radius: var(--border-radius);
}

.markdown-section code[class*="language-"] {
    border-radius: var(--border-radius);
    padding: 0.1em 0.3em 0.2em;
}

/* Inline code */
.markdown-section code:not([class*="lang-"]):not([class*="language-"]),
.markdown-section :not(pre) > code[class*="language-"] {
    padding: 0.05em 0.5em;
    border: 1px solid var(--code-border-color);
    border-radius: 0.3em;
}

/* Remove ligatures for clarity */
.markdown-section code[class*="language-"] *,
.markdown-section pre[class*="language-"] *,
.markdown-section .code-output {
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "calt" 0;
}

/* Text selection */
.markdown-section code[class*="language-"]::-moz-selection,
.markdown-section code[class*="language-"] *::-moz-selection,
.markdown-section pre[class*="language-"] *::-moz-selection,
.markdown-section code[class*="language-"]::selection,
.markdown-section code[class*="language-"] *::selection,
.markdown-section pre[class*="language-"] *::selection {
    background: var(--code-selection-back);
    color: inherit;
    text-shadow: none;
}

/* Token highlighting */
.token.comment                  { color: var(--code-hl-comment-color); }
.token.prolog                   { color: var(--code-hl-comment-color); }
.token.cdata                    { color: var(--code-hl-comment-color); }

.token.keyword                  { color: var(--code-hl-keyword-color); }
.token.variable                 { color: var(--code-hl-variable-color); }
.token.operator                 { color: var(--code-hl-operator-color); }
.token.function                 { color: var(--code-hl-function-color); }
.token.symbol                   { color: var(--code-hl-name-color); }
.token.builtin                  { color: var(--code-hl-name-color); }
.token.attr-name                { color: var(--code-hl-attribute-color); }
.token.class-name               { color: var(--code-hl-attribute-color); }
.token.property                 { color: var(--code-hl-property-color); }
.token.parameter                { color: var(--code-hl-parameter-color); }
.token.selector                 { color: var(--code-hl-selector-color); }

.token.boolean                  { color: var(--code-hl-constant-color); }
.token.constant                 { color: var(--code-hl-constant-color); }
.token.number                   { color: var(--code-hl-number-color); }
.token.string                   { color: var(--code-hl-string-color); }
.token.char                     { color: var(--code-hl-string-color); }
.token.regex                    { color: var(--code-hl-string-color); }
.token.attr-value               { color: var(--code-hl-string-color); }

.token.punctuation              { color: var(--code-hl-punctuation-color); }
.token.entity                   { color: var(--code-hl-punctuation-color); }

.token.atrule                   { color: var(--code-hl-atrule-color); }
.token.rule                     { color: var(--code-hl-rule-color); }

.token.doctype                  { color: var(--code-hl-doctype-color); }
.token.doctype > .token.name    { color: var(--code-hl-attribute-color); }
.token.tag                      { color: var(--code-hl-tag-color); }

.token.url                      { color: var(--code-hl-url-color); }

.token.deleted                  { color: var(--code-hl-alert-color); }
.token.important                { color: var(--code-hl-alert-color); }
.token.inserted                 { color: var(--code-hl-new-color); }

.token.interpolation > .token.punctuation { color: var(--code-hl-interpol-color); }


/* General */

.token.bold         { font-weight: bold; }
.token.italic       { font-style: italic; }

.token.entity       { cursor: help; }

.token.namespace    { opacity: 0.8; }