/**
 * Code Highlighting - VS Code One Dark Theme
 * Para uso com Prism.js nas atividades do curso
 */

/* Customização do tema para combinar com o site */
pre[class*="language-"] {
    margin: 0;
    padding: 1rem;
    border-radius: 0 0 0.75rem 0.75rem;
    background: #1e293b !important;
    overflow-x: auto;
}

code[class*="language-"] {
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    text-shadow: none !important;
    color: #abb2bf;
}

/* Container do bloco de código */
.code-block {
    background: #1e293b;
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.code-block .code-header {
    background: #334155;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.code-block .code-header .filename {
    font-family: 'Fira Code', monospace;
    font-size: 0.875rem;
    color: #94a3b8;
}

.code-block .copy-btn {
    font-size: 0.75rem;
    background: #475569;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.code-block .copy-btn:hover {
    background: #64748b;
}

/* ===== Cores estilo VS Code One Dark ===== */

/* Keywords: import, export, from, function, return, const, let, var, if, else, etc */
.token.keyword {
    color: #c678dd !important;
}

/* Funções e métodos */
.token.function {
    color: #61afef !important;
}

/* Strings: 'texto', "texto" */
.token.string {
    color: #98c379 !important;
}

/* Números */
.token.number {
    color: #d19a66 !important;
}

/* Operadores: =, +, -, *, /, etc */
.token.operator {
    color: #56b6c2 !important;
}

/* Pontuação: {}, [], (), ;, : */
.token.punctuation {
    color: #abb2bf !important;
}

/* Tags JSX/HTML: View, Text, div, span */
.token.tag {
    color: #e06c75 !important;
}

/* Atributos: style, className, onClick */
.token.attr-name {
    color: #d19a66 !important;
}

/* Valores de atributos */
.token.attr-value {
    color: #98c379 !important;
}

/* Comentários */
.token.comment {
    color: #5c6370 !important;
    font-style: italic;
}

/* Classes e tipos */
.token.class-name {
    color: #e5c07b !important;
}

/* Constantes e valores booleanos */
.token.constant,
.token.boolean {
    color: #d19a66 !important;
}

/* Propriedades de objetos */
.token.property {
    color: #e06c75 !important;
}

/* Regex */
.token.regex {
    color: #56b6c2 !important;
}

/* Template literals */
.token.template-string {
    color: #98c379 !important;
}

/* ===== Inline code (dentro de texto) ===== */
code.inline-code {
    background: #334155;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-family: 'Fira Code', monospace;
    font-size: 0.875em;
    color: #e5c07b;
}