/* Strumenti GuidaDashcam — stessi token del tema "Corsia di Guida" (theme.json + style.css).
   Caricato DOPO lo <style> inline di ogni tool: sovrascrive i token e le famiglie tipografiche. */

:root:root:root{
  --bg:#f1f2f3; --surface:#ffffff; --surface-2:#e8eaec; --text:#1c2024; --muted:#5a6067;
  --border:#dcdee0; --accent:#c68a12; --accent-soft:#f6ead0; --accent-strong:#8d6008; --rec:#a83232; --plate-blue:#1857a8;
  --ok:#2e7d4f; --ok-soft:#dff0e6; --warn:#b8741a; --warn-soft:#f6ead0; --crit:#a83232; --crit-soft:#f6e0e0;
  --shadow:none;
  --font-display:"Archivo", "Segoe UI", sans-serif;
  --font-body:"Karla", "Segoe UI", sans-serif;
  --font-mono:"Space Mono", ui-monospace, "Courier New", monospace;
  --radius:4px;
}
@media (prefers-color-scheme: dark){
  :root:root:root:not([data-theme="light"]){
    --bg:#15171a; --surface:#1b1e22; --surface-2:#22262b; --text:#e8e9ea; --muted:#a3a8ad;
    --border:#2c3034; --accent:#e0a83a; --accent-soft:#33280f; --accent-strong:#f0c369; --rec:#d4534c; --plate-blue:#3576d1;
    --ok:#6cc48e; --ok-soft:#14301f; --warn:#e0a83a; --warn-soft:#33280f; --crit:#d4534c; --crit-soft:#33191a;
  }
}
:root:root:root[data-theme="dark"]{
  --bg:#15171a; --surface:#1b1e22; --surface-2:#22262b; --text:#e8e9ea; --muted:#a3a8ad;
  --border:#2c3034; --accent:#e0a83a; --accent-soft:#33280f; --accent-strong:#f0c369; --rec:#d4534c; --plate-blue:#3576d1;
  --ok:#6cc48e; --ok-soft:#14301f; --warn:#e0a83a; --warn-soft:#33280f; --crit:#d4534c; --crit-soft:#33191a;
}

body{font-family:var(--font-body); font-size:1.03rem; 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(1.85rem,3.4vw,2.5rem); line-height:1.2}
.eyebrow, .panel-head h2, .stat .k, th, .pill, .example-tag, .hint, .preset-btn, .field label{font-family:var(--font-mono)}
.eyebrow{color:var(--rec); text-transform:none; letter-spacing:.03em}
.eyebrow::before{background:var(--rec); width:8px; height:8px; animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.eyebrow::before{animation:none}}
.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-mono); font-size:.85rem; letter-spacing:.03em;
  border-radius:4px; background:var(--accent); color:var(--text);
}
/* l'ocra è chiaro: il testo sopra è inchiostro, non bianco (bianco su ocra = 3,0:1, sotto AA) */
button.primary, a.cta-btn, .cta-btn{color:#1c2024}
button.ghost{background:transparent; color:var(--muted); border-color:var(--border)}
a{color:var(--accent-strong)}
a:hover{color:var(--rec)}
.pill{border-radius:4px; font-size:11.5px}
.verdict h3{font-family:var(--font-display); font-weight:700}

/* intestazione e piè di pagina del blog, replicati in statico */
.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:1px solid var(--border);
}
.blog-header .wordmark{
  font-family:var(--font-display); font-weight:800; font-size:1.25rem; letter-spacing:-.005em; text-transform:uppercase;
  text-decoration:none; color:var(--text);
}
.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:.85rem; letter-spacing:.03em;
  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:.85rem; letter-spacing:.03em; 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} }