/* Strumenti Auto (strumentiauto.it) — identità propria: carta del libretto + blu targa.
   18/09/2026: in modalità scura il fondo è acciaio (#1d2834), più chiaro dei due blog, per non confondersi con loro.
   23/09/2026: --highlight, --ok e --warn del tema chiaro scuriti (stessa tinta e saturazione HSL, solo luminosità più bassa)
   per arrivare a 4,5:1 sui loro fondi: #c8641c->#af5718, #2f8f5b->#28794d, #b8741a->#965e15. Il tema scuro non cambia.
   Caricato DOPO lo <style> inline di ogni tool: sovrascrive i token e le famiglie tipografiche. */

:root:root:root{
  --bg:#f4f4f0; --surface:#ffffff; --surface-2:#ebebe4; --text:#17202a; --muted:#56606c;
  --border:#d9d9d0; --accent:#1f4e9c; --accent-soft:#dfe8f7; --accent-strong:#143a78; --highlight:#af5718;
  --ok:#28794d; --ok-soft:#dff1e6; --warn:#965e15; --warn-soft:#f7ead6; --crit:#b93a3a; --crit-soft:#f8e1e1;
  --shadow:none;
  --font-display:"Barlow Semi Condensed", "Segoe UI", sans-serif;
  --font-body:"Barlow", "Segoe UI", sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "Courier New", monospace;
  --radius:4px;
}
@media (prefers-color-scheme: dark){
  :root:root:root:not([data-theme="light"]){
    --bg:#1d2834; --surface:#25313f; --surface-2:#2c3a49; --text:#e9eef5; --muted:#9dacbd;
    --border:#41526a; --accent:#7fb0f0; --accent-soft:#1f3350; --accent-strong:#a9c6f5; --highlight:#e08a4a;
    --ok:#5fc98d; --ok-soft:#163a2a; --warn:#e5b454; --warn-soft:#3a2f14; --crit:#f0847c; --crit-soft:#3d1f1f;
  }
}
:root:root:root[data-theme="dark"]{
  --bg:#1d2834; --surface:#25313f; --surface-2:#2c3a49; --text:#e9eef5; --muted:#9dacbd;
  --border:#41526a; --accent:#7fb0f0; --accent-soft:#1f3350; --accent-strong:#a9c6f5; --highlight:#e08a4a;
  --ok:#5fc98d; --ok-soft:#163a2a; --warn:#e5b454; --warn-soft:#3a2f14; --crit:#f0847c; --crit-soft:#3d1f1f;
}

body{font-family:var(--font-body); font-size:1.05rem; line-height:1.6; padding-block:0 64px}
h1,h2,h3{font-family:var(--font-display); font-weight:700; letter-spacing:-.01em}
h1{font-size:clamp(2rem,3.6vw,2.8rem); line-height:1.15; text-transform:uppercase; letter-spacing:.01em}
.eyebrow, .panel-head h2, .stat .k, th, .pill, .example-tag, .hint, .preset-btn, .field label{font-family:var(--font-mono)}
.eyebrow{color:var(--highlight)}
.eyebrow::before{background:var(--highlight); border-radius:1px}
.panel, .stat, .verdict, .toggle-row, textarea, .field .input-row, .preset-btn, .backup-note{border-radius:var(--radius)}
button, a.cta-btn, .cta-btn{
  font-family:var(--font-display); font-weight:700; font-size:.95rem; text-transform:uppercase; letter-spacing:.05em;
  border-radius:3px; background:var(--accent); color:var(--surface);
}
button.ghost{background:transparent; color:var(--muted); border-color:var(--border)}
a{color:var(--accent)}
a:hover{color:var(--highlight)}
.pill{border-radius:3px; text-transform:uppercase; letter-spacing:.05em; font-size:11.5px}
.verdict h3{font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.02em}

/* intestazione e piè di pagina del sito */
.blog-header{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding:.9rem 0; margin:0 0 2.4rem; border-bottom:3px solid var(--accent);
}
.blog-header .wordmark{
  font-family:var(--font-display); font-weight:800; font-size:1.3rem; letter-spacing:.04em; text-transform:uppercase;
  text-decoration:none; color:var(--text);
}
.blog-header .wordmark b{color:var(--accent)}
.blog-header nav, .blog-footer nav{display:flex; gap:1.2rem; flex-wrap:wrap}
.blog-header nav a, .blog-footer nav a{
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:var(--muted); border-bottom:1px solid transparent; padding-bottom:.2rem;
}
.blog-header nav a:hover, .blog-footer nav a:hover{color:var(--accent); border-color:var(--accent)}
.blog-footer{
  margin-top:2.4rem; padding-top:1.5rem; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center;
}
.blog-footer .copy{font-family:var(--font-mono); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}

/* accessibilità comune a tutti gli strumenti */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ *, *::before, *::after{transition:none !important; animation:none !important; scroll-behavior:auto !important} }