@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --color-bg:#f8f7f3;
  --color-surface:#fff;
  --color-text:#242923;
  --color-muted:#777d73;
  --color-border:#e8e8e1;
  --color-primary:#315d48;
  --color-primary-hover:#244a38;
  --color-soft-primary:#eff5e8;
  --color-focus:#d7ef9b66;
  --color-success:#315d48;
  --color-danger:#a74735;
  --radius-card:22px;
  --radius-control:12px;
}
body { background:var(--color-bg); color:var(--color-text); font-family:'DM Sans','Noto Sans JP',ui-sans-serif,system-ui,sans-serif; }
.site-header { background:rgba(255,255,255,.92); border-bottom-color:var(--color-border); }
/* Keep the header/footer bands full-bleed; their inner .container stays centered. */
.site-header, .site-footer {
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
}
.site-header .brand { color:var(--color-text); }
.site-header .brand-mark { background:var(--color-primary); color:#fff; box-shadow:none; }
.site-header .nav-links a { color:#62695f; }
.site-header .nav-links a:hover { color:var(--color-primary); }
.tool-page-header { padding:34px 0 20px; }
.tool-page-header .back-link a {
  display:inline-flex; align-items:center; gap:7px; padding:7px 11px;
  border:1px solid var(--color-border); border-radius:999px; background:#fff;
  color:var(--color-primary); text-decoration:none; font-size:.82rem; font-weight:650;
  transition:background .16s ease, transform .16s ease;
}
.tool-page-header .back-link a:hover { background:var(--color-soft-primary); transform:translateX(-2px); }
.tool-page-header h1 { color:var(--color-text); letter-spacing:-.055em; }
.tool-page-header .muted { color:var(--color-muted); }
.tool-page .panel, .tool-page .results, .tool-page .info {
  border-color:var(--color-border); border-radius:20px; background:#fff;
  box-shadow:0 9px 28px #26311b0a;
}
.tool-page label { color:#41483f; }
.tool-page textarea, .tool-page input[type="text"], .tool-page input[type="number"],
.tool-page input[type="search"], .tool-page select {
  border-color:#d9ddd3; border-radius:11px; background:#fffefa; color:var(--color-text);
}
.tool-page textarea:focus, .tool-page input:focus, .tool-page select:focus {
  border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-focus);
}
.tool-page button, .tool-page .file-button { background:var(--color-primary); box-shadow:none; border-radius:11px; }
.tool-page button:hover, .tool-page .file-button:hover { background:var(--color-primary-hover); }
.tool-page button.secondary { background:var(--color-soft-primary); color:var(--color-primary); }
.tool-page button.secondary:hover { filter:brightness(.97); }
.tool-page .editor { border-color:var(--color-border); border-radius:12px; background:#fffefa; }
.tool-page .line-numbers { border-right-color:var(--color-border); background:var(--color-soft-primary); color:#73796f; }
.tool-page .editor textarea { background:transparent; }
.tool-page .editor:focus-within { outline:3px solid var(--color-focus); border-color:var(--color-primary); }
.tool-page .stat { background:var(--color-soft-primary); border-color:var(--color-border); color:#62695f; }
.tool-page .stat strong { color:var(--color-text); }
.tool-page .drop-zone { border-color:var(--color-primary); background:var(--color-soft-primary); }
.tool-page .preview { border-color:var(--color-border); background:var(--color-soft-primary); }
.tool-page .diff-item { border-color:var(--color-border); background:#fffefa; }
.tool-page .diff-item code { background:var(--color-soft-primary); }
.tool-page .summary .added { background:#e8f2e4; color:#315d48; }
.tool-page .info h2, .tool-page .panel h2 { color:#30382f; }
footer, .site-footer { border-top-color:var(--color-border); background:#fff; color:var(--color-muted); }
footer a:hover { color:var(--color-primary); }

/* Each tool gets its own identifying accent and canvas tint. */
body[data-tool-theme="json-diff"] {
  --color-bg:#f7f4fc; --color-primary:#68529c; --color-primary-hover:#523f80;
  --color-soft-primary:#f0eafb; --color-focus:#9a82d455;
}
body[data-tool-theme="json-formatter"] {
  --color-bg:#f1f8f7; --color-primary:#24746d; --color-primary-hover:#195e59;
  --color-soft-primary:#e5f3f1; --color-focus:#6ab5aa55;
}
body[data-tool-theme="text-diff"] {
  --color-bg:#fff6f0; --color-primary:#ad5a36; --color-primary-hover:#914526;
  --color-soft-primary:#ffede2; --color-focus:#df906655;
}
body[data-tool-theme="uuid"] {
  --color-bg:#f3f6fc; --color-primary:#4c65a5; --color-primary-hover:#3a5089;
  --color-soft-primary:#e8eef9; --color-focus:#819ad755;
}
body[data-tool-theme="word-counter"] {
  --color-bg:#fff9ef; --color-primary:#8d6b13; --color-primary-hover:#70540d;
  --color-soft-primary:#f8efd7; --color-focus:#d1ad4e55;
}
body[data-tool-theme="image-resizer"] {
  --color-bg:#fff4f7; --color-primary:#a44668; --color-primary-hover:#883653;
  --color-soft-primary:#f9e8ee; --color-focus:#d586a255;
}
body[data-tool-theme="csv-json"] {
  --color-bg:#f1f7fc; --color-primary:#256b9b; --color-primary-hover:#1c557d;
  --color-soft-primary:#e4f0f8; --color-focus:#6ba8ce55;
}
@media (prefers-reduced-motion: reduce) { .tool-page-header .back-link a { transition:none; } }