/* ============================================
   EVM CODE EDITOR PRO - COLORATION SYNTAXIQUE
   ============================================ */

/* Container pour la coloration syntaxique */
.syntax-highlight {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    pointer-events: none;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    color: transparent;
}

/* L'éditeur doit être transparent pour voir la coloration */
.editor-with-syntax {
    background: transparent;
    position: relative;
    z-index: 2;
    color: var(--editor-text);
    caret-color: var(--text-primary);
}

/* Container wrapper pour superposition */
.editor-syntax-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--editor-bg);
}

/* ============================================
   COLORATION HTML
   ============================================ */

/* Balises HTML */
.syntax-html-tag {
    color: #569cd6;
    font-weight: normal;
}

/* Noms de balises */
.syntax-html-tagname {
    color: #4ec9b0;
    font-weight: normal;
}

/* Attributs */
.syntax-html-attr {
    color: #9cdcfe;
    font-weight: normal;
}

/* Valeurs d'attributs */
.syntax-html-value {
    color: #ce9178;
    font-weight: normal;
}

/* Commentaires HTML */
.syntax-html-comment {
    color: #6a9955;
    font-style: italic;
}

/* DOCTYPE */
.syntax-html-doctype {
    color: #569cd6;
    font-weight: normal;
}

/* ============================================
   COLORATION CSS
   ============================================ */

/* Sélecteurs CSS */
.syntax-css-selector {
    color: #d7ba7d;
    font-weight: normal;
}

/* Propriétés CSS */
.syntax-css-property {
    color: #9cdcfe;
    font-weight: normal;
}

/* Valeurs CSS */
.syntax-css-value {
    color: #ce9178;
    font-weight: normal;
}

/* Commentaires CSS */
.syntax-css-comment {
    color: #6a9955;
    font-style: italic;
}

/* Accolades, deux-points, point-virgule */
.syntax-css-punctuation {
    color: #d4d4d4;
    font-weight: normal;
}

/* Unités (px, %, em, etc.) */
.syntax-css-unit {
    color: #b5cea8;
    font-weight: normal;
}

/* Couleurs hexadécimales */
.syntax-css-color {
    color: #ce9178;
    font-weight: normal;
}

/* Pseudo-classes et pseudo-éléments */
.syntax-css-pseudo {
    color: #dcdcaa;
    font-weight: normal;
}

/* ============================================
   COLORATION JAVASCRIPT
   ============================================ */

/* Mots-clés JavaScript */
.syntax-js-keyword {
    color: #569cd6;
    font-weight: normal;
}

/* Fonctions */
.syntax-js-function {
    color: #dcdcaa;
    font-weight: normal;
}

/* Chaînes de caractères */
.syntax-js-string {
    color: #ce9178;
    font-weight: normal;
}

/* Nombres */
.syntax-js-number {
    color: #b5cea8;
    font-weight: normal;
}

/* Commentaires JavaScript */
.syntax-js-comment {
    color: #6a9955;
    font-style: italic;
}

/* Opérateurs */
.syntax-js-operator {
    color: #d4d4d4;
    font-weight: normal;
}

/* Variables et identifiants */
.syntax-js-variable {
    color: #9cdcfe;
    font-weight: normal;
}

/* Ponctuation (parenthèses, accolades, etc.) */
.syntax-js-punctuation {
    color: #d4d4d4;
    font-weight: normal;
}

/* Constantes booléennes, null, undefined */
.syntax-js-constant {
    color: #569cd6;
    font-weight: normal;
}

/* ============================================
   THÈME CLAIR - AJUSTEMENTS
   ============================================ */

body:not(.dark-mode) .syntax-html-tag {
    color: #0000ff;
}

body:not(.dark-mode) .syntax-html-tagname {
    color: #800000;
}

body:not(.dark-mode) .syntax-html-attr {
    color: #ff0000;
}

body:not(.dark-mode) .syntax-html-value {
    color: #0000ff;
}

body:not(.dark-mode) .syntax-html-comment {
    color: #008000;
}

body:not(.dark-mode) .syntax-css-selector {
    color: #800000;
}

body:not(.dark-mode) .syntax-css-property {
    color: #ff0000;
}

body:not(.dark-mode) .syntax-css-value {
    color: #0000ff;
}

body:not(.dark-mode) .syntax-css-comment {
    color: #008000;
}

body:not(.dark-mode) .syntax-js-keyword {
    color: #0000ff;
}

body:not(.dark-mode) .syntax-js-function {
    color: #795e26;
}

body:not(.dark-mode) .syntax-js-string {
    color: #a31515;
}

body:not(.dark-mode) .syntax-js-number {
    color: #098658;
}

body:not(.dark-mode) .syntax-js-comment {
    color: #008000;
}

body:not(.dark-mode) .syntax-js-variable {
    color: #001080;
}