/* ==========================================================================
   AutomatorsX LMS — code blocks
   Token colours for the local highlighter in public/js/code-blocks.js, plus
   the copy button. Loaded anywhere lesson or community content renders.
   ========================================================================== */

pre { position: relative; }

.code-copy {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 5px 11px;
    font: inherit;
    font-size: 11.5px;
    line-height: 1;
    border-radius: 7px;
    border: 1px solid rgba(148, 163, 184, .35);
    background: rgba(15, 15, 15, .55);
    color: #E2E8F0;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, border-color .15s, color .15s;
}
pre:hover .code-copy,
.code-copy:focus-visible { opacity: 1; }
.code-copy:hover { border-color: #FF0000; color: #fff; }

/* The language, shown once a block has been recognised. Purely informative —
   an unrecognised block simply has no label rather than a wrong one. */
pre[data-language]::before {
    content: attr(data-language);
    position: absolute;
    top: 10px;
    left: 14px;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, .65);
    pointer-events: none;
}
pre[data-language] > code { display: block; padding-top: 14px; }

/* --- Tokens --------------------------------------------------------------
   Tuned for the dark code surface used by the player and the forum. Contrast
   checked against #1E1E23: every token clears 4.5:1. */
.tok-kw   { color: #C792EA; font-weight: 600; }
.tok-str  { color: #8BD49C; }
.tok-num  { color: #F78C6C; }
.tok-lit  { color: #F78C6C; font-weight: 600; }
.tok-com  { color: #8A93A6; font-style: italic; }
.tok-key  { color: #82AAFF; }
.tok-tag  { color: #FF8B8B; }

/* On a light surface the same palette would wash out, so it is darkened
   rather than swapped — the roles stay recognisable between the two. */
.lms-light pre .tok-kw   { color: #7C3AED; }
.lms-light pre .tok-str  { color: #047857; }
.lms-light pre .tok-num,
.lms-light pre .tok-lit  { color: #B45309; }
.lms-light pre .tok-com  { color: #64748B; }
.lms-light pre .tok-key  { color: #1D4ED8; }
.lms-light pre .tok-tag  { color: #BE123C; }