/**
 * Syntax Highlighter - VS Code Light Theme
 * Based on VS Code's default light color scheme
 */

/* Container styling */
pre[class*="language-"],
code.code-colored {
    font-family: 'Consolas', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 1rem;
    line-height: 1.8;
    white-space: pre;
    tab-size: 4;
}

pre[class*="language-"] {
    display: block;
    padding: 16px 20px;
    margin: 16px 0;
    background: #f8f8f8;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    overflow-x: auto;
    color: #24292e;
}

/* Inline code in pre */
pre[class*="language-"] > code {
    display: block;
    background: transparent;
    padding: 0;
    margin: 0;
    border: none;
    font-size: inherit;
    line-height: inherit;
}

/* Token colors - VS Code Light Theme */

/* Keywords: if, else, function, class, return, etc. */
.tok-keyword {
    color: #0000ff;
    font-weight: normal;
}

/* Strings: "text", 'text', `template` */
.tok-string {
    color: #a31515;
}

/* Comments: // comment, /* comment */ 
.tok-comment {
    color: #008000;
    font-style: italic;
}

/* HTML/XML Tags: div, span, etc. */
.tok-tag {
    color: #800000;
}

/* Attributes: class, id, href, etc. */
.tok-attr {
    color: #e50000;
}

/* Variables: $variable, this */
.tok-var {
    color: #001080;
}

/* Functions: functionName(), methodCall() */
.tok-func {
    color: #795e26;
}

/* Numbers: 123, 45.67, 0xff */
.tok-num {
    color: #098658;
}

/* Operators: =, +, -, *, /, etc. */
.tok-operator {
    color: #000000;
}

/* Punctuation: {}, (), [], ;, , */
.tok-punctuation {
    color: #000000;
}

/* Class names: ClassName, MyClass */
.tok-class {
    color: #267f99;
}

/* Properties: object.property */
.tok-property {
    color: #001080;
}


/* ============================================
   Alternative: One Light Theme (Atom-style)
   Uncomment to use instead
   ============================================ */

/*
pre[class*="language-"] {
    background: #fafafa;
    color: #383a42;
}

.tok-keyword { color: #a626a4; }
.tok-string { color: #50a14f; }
.tok-comment { color: #a0a1a7; font-style: italic; }
.tok-tag { color: #e45649; }
.tok-attr { color: #986801; }
.tok-var { color: #e45649; }
.tok-func { color: #4078f2; }
.tok-num { color: #986801; }
.tok-class { color: #c18401; }
.tok-property { color: #e45649; }
*/


/* ============================================
   Alternative: GitHub Light Theme
   Uncomment to use instead
   ============================================ */

/*
pre[class*="language-"] {
    background: #f6f8fa;
    color: #24292e;
    border-color: #e1e4e8;
}

.tok-keyword { color: #d73a49; }
.tok-string { color: #032f62; }
.tok-comment { color: #6a737d; font-style: italic; }
.tok-tag { color: #22863a; }
.tok-attr { color: #6f42c1; }
.tok-var { color: #e36209; }
.tok-func { color: #6f42c1; }
.tok-num { color: #005cc5; }
.tok-class { color: #6f42c1; }
.tok-property { color: #005cc5; }
*/


/* ============================================
   Alternative: Solarized Light Theme
   Uncomment to use instead
   ============================================ */

/*
pre[class*="language-"] {
    background: #fdf6e3;
    color: #657b83;
    border-color: #eee8d5;
}

.tok-keyword { color: #859900; }
.tok-string { color: #2aa198; }
.tok-comment { color: #93a1a1; font-style: italic; }
.tok-tag { color: #268bd2; }
.tok-attr { color: #b58900; }
.tok-var { color: #cb4b16; }
.tok-func { color: #268bd2; }
.tok-num { color: #d33682; }
.tok-class { color: #b58900; }
.tok-property { color: #268bd2; }
*/


/* Line numbers (optional enhancement) */
pre[class*="language-"].line-numbers {
    counter-reset: line;
    padding-left: 50px;
    position: relative;
}

pre[class*="language-"].line-numbers > code {
    position: relative;
}

pre[class*="language-"].line-numbers code::before {
    content: counter(line);
    counter-increment: line;
    position: absolute;
    left: -40px;
    width: 30px;
    text-align: right;
    color: #999;
    font-size: 12px;
}

/* Selection styling */
pre[class*="language-"] ::selection,
code.code-colored ::selection {
    background: #add6ff;
}

/* Scrollbar styling (webkit browsers) */
pre[class*="language-"]::-webkit-scrollbar {
    height: 8px;
}

pre[class*="language-"]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

pre[class*="language-"]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

pre[class*="language-"]::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}
.text-bg-gray {
    background-color: #f1f1f1;
}