/* RG tool pages — shared tokens, chrome, and typography.
   Canonical: WEB/RG/tools/rg-tools.css
   Per-tool sheets live beside HTML under WEB/RG/tools/<tool>/ */

:root {
  color-scheme: dark;
  --bg: #07080b;
  --bg2: #0e1016;
  --ink: #d8dce6;
  --dim: #7a8294;
  --line: #2a3040;
  --amber: #e8a030;
  --amber-dim: #a07020;
  --green: #6fcf6f;
  --cyan: #5ec8e0;
  --magenta: #d070e0;
  --panel: #12141a;
  --term: #0b0d12;
  --term-bar: #171a22;
  --mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --w: 84ch;
  --page-w: 52rem;
  --rail-w: 11rem;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  min-height: 100vh;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(232, 160, 48, 0.14), transparent 60%),
    radial-gradient(700px 380px at 95% 8%, rgba(94, 200, 224, 0.10), transparent 55%),
    linear-gradient(180deg, var(--bg2), var(--bg) 36%);
}
a { color: var(--cyan); text-decoration: none; border-bottom: 1px dotted transparent; }
a:hover { border-bottom-color: var(--cyan); }

.banner {
  font: 13px/1.4 var(--mono);
  color: var(--dim);
  border: 1px solid var(--line);
  background: rgba(18, 20, 26, 0.88);
  backdrop-filter: blur(6px);
  padding: .85rem 1.1rem;
  margin-bottom: 1.75rem;
}
.banner strong { color: var(--amber); font-weight: 700; }
.banner em { color: var(--ink); font-style: normal; }
.banner a { color: var(--ink); border: 0; }
.banner a:hover { color: var(--amber); }

.kicker {
  font: 700 .78rem/1 var(--mono);
  margin: 0 0 .55rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber);
}
h1 {
  font: 700 2.2rem/1.1 var(--mono);
  margin: 0 0 .6rem;
  letter-spacing: -0.03em;
  color: var(--amber);
}
.lede {
  margin: 0 0 1rem;
  color: var(--dim);
  font-size: 1.05rem;
}
.lede strong { color: var(--ink); font-weight: 600; }

footer {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--dim);
  text-align: center;
}
footer a { color: var(--amber); border: 0; }
footer .credits { max-width: 42rem; margin: 0 auto 1rem; font-size: .75rem; line-height: 1.45; }
.heart { color: var(--amber); }
code { font-family: var(--mono); }