/* Code Block and Syntax Highlighting Styles */
:root {
    /* These variables are intended to be used alongside base-theme.css */
    /* They might override or complement variables from base-theme if names clash,
       but ideally, they are additive for code-specific styling. */
    --code-bg-color: #2d3748; /* Darker blue-gray for code (light mode) */
    --code-text-color: #e2e8f0; /* Light text for code (light mode) */
    --code-comment: #9ca3af;
    --code-keyword: #5a9ddf;
    --code-string: #6a9955;
    --code-number: #b5cea8;
    --code-type: #4ec9b0;
    --code-property-wrapper: #dcc682;
    --operator: #d4d4d4;
    --preprocessor: var(--accent-color); /* Use accent color for preprocessor directives */
    --output-bg-color: #f0f2f5; /* For output boxes often associated with code */
    --output-border-color: #d1d9e6;
}

@media (prefers-color-scheme: dark) {
    :root {
        --code-bg-color: #1e293b; /* Even darker blue for code in dark mode */
        --code-text-color: #e2e8f0; /* Text color can remain similar */
        --code-comment: #a0aec0;
        --code-keyword: #82aaff;
        --code-string: #c3e88d;
        --code-number: #f78c6c;
        --code-type: #89ddff;
        --code-property-wrapper: #ffcb6b;
        --output-bg-color: #1c2635;
        --output-border-color: #3a455a;
    }
}

/* Code Blocks */
pre {
    background-color: var(--code-bg-color);
    color: var(--code-text-color);
    padding: 15px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.9rem;
    margin-bottom: 15px; /* Default margin, can be overridden */
}

code { /* For inline code and code within pre blocks */
    font-family: "Fira Code", "Courier New", monospace;
}

/* Inline code specific styling (if different from pre > code) */
/* Example: body code { background-color: var(--bg-color); padding: 2px 4px; border-radius: 3px; font-size: 0.85em; } */


/* Syntax Highlighting Classes */
.comment { color: var(--code-comment); }
.keyword { color: var(--code-keyword); }
.string { color: var(--code-string); }
.number { color: var(--code-number); }
.type { color: var(--code-type); }
.operator { color: var(--operator); }
.property-wrapper { color: var(--code-property-wrapper); }
.preprocessor { color: var(--preprocessor); font-style: italic; }

/* Styles for output boxes often shown with code examples */
.output-container {
    margin-top: auto; /* Pushes to bottom of a flex card */
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}
.output-container h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--heading-color);
    opacity: 0.8;
}
.output-box {
    background-color: var(--output-bg-color);
    border: 1px solid var(--output-border-color);
    border-radius: 8px;
    padding: 15px;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--text-color); /* Use general text color for output box content */
}

.user-input {
    color: #82aaff; /* A light blue color for visibility */
    font-weight: bold;
}