/* Prism.js Customizations for Solarized Theme */

/* Override Prism's default styling to match the site's Solarized theme */
pre[class*="language-"] {
    border-radius: var(--border-radius);
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

code[class*="language-"],
pre[class*="language-"] {
    font-family: var(--font-family-mono);
}

/* Light mode code block styling */
:root,
.light-mode {
    --prism-bg: var(--sol-base3);
    --prism-border: var(--sol-base2);
}

pre[class*="language-"] {
    background: var(--prism-bg);
    border: 1px solid var(--prism-border);
}

/* Dark mode code block styling */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) {
        --prism-bg: var(--sol-base03);
        --prism-border: var(--sol-base02);
    }
}

.dark-mode {
    --prism-bg: var(--sol-base03);
    --prism-border: var(--sol-base02);
}

/* Dark mode - use prism-solarized dark theme colors */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) pre[class*="language-"],
    :root:not(.light-mode) code[class*="language-"] {
        color: var(--sol-base0);
    }

    :root:not(.light-mode) .token.comment,
    :root:not(.light-mode) .token.prolog,
    :root:not(.light-mode) .token.doctype,
    :root:not(.light-mode) .token.cdata {
        color: var(--sol-base01);
    }

    :root:not(.light-mode) .token.punctuation {
        color: var(--sol-base0);
    }

    :root:not(.light-mode) .token.property,
    :root:not(.light-mode) .token.tag,
    :root:not(.light-mode) .token.boolean,
    :root:not(.light-mode) .token.number,
    :root:not(.light-mode) .token.constant,
    :root:not(.light-mode) .token.symbol,
    :root:not(.light-mode) .token.deleted {
        color: var(--sol-cyan);
    }

    :root:not(.light-mode) .token.selector,
    :root:not(.light-mode) .token.attr-name,
    :root:not(.light-mode) .token.string,
    :root:not(.light-mode) .token.char,
    :root:not(.light-mode) .token.builtin,
    :root:not(.light-mode) .token.inserted {
        color: var(--sol-green);
    }

    :root:not(.light-mode) .token.operator,
    :root:not(.light-mode) .token.entity,
    :root:not(.light-mode) .token.url,
    :root:not(.light-mode) .language-css .token.string,
    :root:not(.light-mode) .style .token.string {
        color: var(--sol-base1);
    }

    :root:not(.light-mode) .token.atrule,
    :root:not(.light-mode) .token.attr-value,
    :root:not(.light-mode) .token.keyword {
        color: var(--sol-blue);
    }

    :root:not(.light-mode) .token.function,
    :root:not(.light-mode) .token.class-name {
        color: var(--sol-yellow);
    }

    :root:not(.light-mode) .token.regex,
    :root:not(.light-mode) .token.important,
    :root:not(.light-mode) .token.variable {
        color: var(--sol-orange);
    }
}

.dark-mode pre[class*="language-"],
.dark-mode code[class*="language-"] {
    color: var(--sol-base0);
}

.dark-mode .token.comment,
.dark-mode .token.prolog,
.dark-mode .token.doctype,
.dark-mode .token.cdata {
    color: var(--sol-base01);
}

.dark-mode .token.punctuation {
    color: var(--sol-base0);
}

.dark-mode .token.property,
.dark-mode .token.tag,
.dark-mode .token.boolean,
.dark-mode .token.number,
.dark-mode .token.constant,
.dark-mode .token.symbol,
.dark-mode .token.deleted {
    color: var(--sol-cyan);
}

.dark-mode .token.selector,
.dark-mode .token.attr-name,
.dark-mode .token.string,
.dark-mode .token.char,
.dark-mode .token.builtin,
.dark-mode .token.inserted {
    color: var(--sol-green);
}

.dark-mode .token.operator,
.dark-mode .token.entity,
.dark-mode .token.url,
.dark-mode .language-css .token.string,
.dark-mode .style .token.string {
    color: var(--sol-base1);
}

.dark-mode .token.atrule,
.dark-mode .token.attr-value,
.dark-mode .token.keyword {
    color: var(--sol-blue);
}

.dark-mode .token.function,
.dark-mode .token.class-name {
    color: var(--sol-yellow);
}

.dark-mode .token.regex,
.dark-mode .token.important,
.dark-mode .token.variable {
    color: var(--sol-orange);
}

/* Line numbers styling */
.line-numbers .line-numbers-rows {
    border-right: 1px solid var(--border-color);
}

.line-numbers-rows > span:before {
    color: var(--text-color-muted);
}

/* Copy button styling */
div.code-toolbar > .toolbar {
    opacity: 1;
    font-family: var(--font-family-sans);
}

div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
    background: var(--bg-color-alt);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 0.3em 0.6em;
    font-size: 0.8em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

div.code-toolbar > .toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar > .toolbar-item > button:focus {
    background: var(--link-color);
    color: var(--sol-base3);
    border-color: var(--link-color);
}

/* Success state for copy button */
div.code-toolbar > .toolbar > .toolbar-item > button[data-copy-state="copy-success"] {
    background: var(--sol-green);
    color: var(--sol-base3);
    border-color: var(--sol-green);
}