/* ==========================================================================
   LAB 451 — MD Vibe Editor  (exp.lab451.net/mdeditor/)
   Includere DOPO i due <style> inline esistenti (in fondo all'<head>).
   L'editor ha già il toggle: dark = default, light = [data-theme="light"].
   Qui si rimappano le sue variabili sui token LAB 451, senza toccare il resto.
   ========================================================================== */

/* Modalità scura dell'editor → variante scura LAB 451 */
:root:not([data-theme="light"]) {
  --l451-bg:            #14162c;
  --l451-surface:       #1b1e3a;
  --l451-surface-hover: #23274a;
  --l451-border:        #2e3260;
  --l451-text:          #e6e6f2;
  --l451-muted:         #8d90b4;
  --l451-accent:        #a88bd8;
  --l451-accent-dim:    rgba(168, 139, 216, .15);
  --l451-selection:     rgba(168, 139, 216, .30);
  --l451-code-bg:       #1f2244;
  --l451-code-text:     #cbb8f0;
  --l451-err:           #f08aa0;
  --l451-ok:            #5fd39a;
}

/* Variabili dell'editor → token (valgono per entrambi i temi) */
:root,
:root[data-theme="light"] {
  --bg:                  var(--l451-bg);
  --surface:             var(--l451-surface);
  --surface-hover:       var(--l451-surface-hover);
  --surface-hover-light: var(--l451-accent-dim);
  --border:              var(--l451-border);
  --text:                var(--l451-text);
  --text-muted:          var(--l451-muted);
  --accent:              var(--l451-accent);
  --accent-dim:          var(--l451-accent-dim);
  --danger:              var(--l451-err);
  --code-bg:             var(--l451-code-bg);
  --code-text:           var(--l451-code-text);
  --code-block-text:     var(--l451-ok);
  --selection:           var(--l451-selection);
  --font-ui:             var(--l451-font);
  --font-mono:           var(--l451-font-mono);
}

/* Titoli dell'anteprima in DM Sans bold, come il logo */
.preview h1, .preview h2, .preview h3 {
  font-family: var(--l451-font);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.preview h1 { color: var(--l451-text); }

/* --- Allineamento cursore nell'editor ---
   Il livello colorato (.editor-highlight) sta sotto la textarea: le lettere devono
   avere la stessa larghezza in entrambi. DM Mono non ha il peso 700, quindi Safari e
   Firefox simulavano il grassetto allargando i caratteri e il cursore restava indietro.
   Il peso 500 esiste e ha la stessa larghezza (600 unità) del 400. */
.editor-highlight, #editor, .editor-mirror { font-synthesis-weight: none; }
.editor-highlight .tok-h,
.editor-highlight .tok-bold,
.editor-highlight .tok-list,
.editor-highlight .tok-task { font-weight: 500; }