/* ==========================================================================
   LAB 451 — Truchet Hex Cipher  (exp.lab451.net/hextruchet/)
   Includere DOPO style.css.
   Passa da blu notte + JetBrains Mono a bianco/navy/purple + DM Sans / DM Mono.
   ========================================================================== */

:root {
  --bg:      var(--l451-bg);
  --surface: var(--l451-surface);
  --border:  var(--l451-border);
  --text:    var(--l451-text);
  --muted:   var(--l451-muted);
  --accent:  var(--l451-accent);
}

/* UI in DM Sans, dati/hex in DM Mono */
body { font-family: var(--l451-font); }

#log-panel,
.dump-body,
#dec-result,
.field input[type="text"] { font-family: var(--l451-font-mono); }

h1 {
  font-weight: 700;
  opacity: 1;
  color: var(--l451-text);
}

/* Le "card" sono su fondo bianco: surface tenue + campi bianchi */
.card { border-radius: var(--l451-radius); }
.field input[type="text"],
.pal-btn,
.btn-quote,
.btn,
#log-panel { background: var(--l451-bg); }

/* Colori hardcoded in style.css → token */
.pal-btn:hover,
.btn-quote:hover,
.btn:hover,
.tag-chip:hover,
.btn-file:hover   { border-color: var(--l451-border-strong); }

.btn:hover        { background: var(--l451-surface-hover); }
.btn.primary      { background: var(--l451-accent); color: #fff; border-color: var(--l451-accent); }
.btn.primary:hover{ background: var(--l451-navy); border-color: var(--l451-navy); }

.tag-chip.active  { background: var(--l451-accent-dim); }

.log-ok   { color: var(--l451-ok); }
.log-err  { color: var(--l451-err); }
.log-info { color: var(--l451-info); }
.log-warn { color: var(--l451-warn); }