/* Shared theme for the standalone tool pages under /tools/.
   Site fonts (self-hosted, nothing from Google), light/dark tokens that follow the site theme toggle,
   and the small site header/footer. Each tool keeps its own layout CSS inline. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  /* site tokens (header, footer, page chrome) */
  --s-bg: #f6f7fa;
  --s-surface: #ffffff;
  --s-text: #0f1722;
  --s-muted: #556072;
  --s-muted-2: #66738a;
  --s-line: #dfe3ea;
  --s-accent: #2457d6;
  --s-on-accent: #ffffff;
  --s-accent-soft: #e8eefc;

  --f-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* tokens used by the two command builders (FlexApp One, ProfileUnity) */
  --bg: var(--s-bg);
  --panel: var(--s-surface);
  --panel-alt: #eef1f7;
  --border: #d6dce6;
  --border-soft: #e6eaf1;
  --amber: var(--s-accent);          /* primary accent: arguments, buttons, labels */
  --amber-dim: #9db4ec;
  --teal: #0b7a53;                   /* values, success */
  --teal-dim: #0b7a53;
  --text: var(--s-text);
  --muted: var(--s-muted);
  --muted-2: var(--s-muted-2);
  --danger: #c4452b;
  --danger-text: #a93a1f;
  --teal-text: #0b6a49;
  --on-accent: var(--s-on-accent);
  --accent-soft: var(--s-accent-soft);
  --mono: var(--f-mono);
  --sans: var(--f-sans);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --s-bg: #0a0f1a; --s-surface: #111a2c; --s-text: #e3eaf7; --s-muted: #8a9bb8; --s-muted-2: #7487a6;
    --s-line: #23304a; --s-accent: #5ad1e6; --s-on-accent: #06222a; --s-accent-soft: #12263a;
    --panel-alt: #16213a; --border: #23304a; --border-soft: #1b2740;
    --amber-dim: #1d5d75; --teal: #6ee7a0; --teal-dim: #1d6b4a;
    --danger: #ff8a65; --danger-text: #f0a087; --teal-text: #9be8c2;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --s-bg: #0a0f1a; --s-surface: #111a2c; --s-text: #e3eaf7; --s-muted: #8a9bb8; --s-muted-2: #7487a6;
  --s-line: #23304a; --s-accent: #5ad1e6; --s-on-accent: #06222a; --s-accent-soft: #12263a;
  --panel-alt: #16213a; --border: #23304a; --border-soft: #1b2740;
  --amber-dim: #1d5d75; --teal: #6ee7a0; --teal-dim: #1d6b4a;
  --danger: #ff8a65; --danger-text: #f0a087; --teal-text: #9be8c2;
  color-scheme: dark;
}

/* ---- site header ---- */
.site-bar { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--s-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--s-line); margin-bottom: 28px; font-family: var(--f-sans); }
.site-bar.bar-inset { margin-left: -24px; margin-right: -24px; }
.bar-inset .site-bar-in { max-width: 1228px; }   /* 1180px page + 2x24px body padding */
.bar-narrow .site-bar-in { max-width: 920px; }
.site-bar-in { max-width: 1180px; margin: 0 auto; padding: 0 24px; min-height: 60px; display: flex; align-items: center; gap: 12px; }
.site-bar a { text-decoration: none; }
.sb-brand { display: inline-flex; align-items: center; gap: 10px; font: 700 19px/1 var(--f-sans); letter-spacing: -.01em; color: var(--s-text); }
.sb-brand img { width: 28px; height: 28px; border-radius: 7px; }
.sb-brand i { font-style: normal; color: var(--s-accent); }
.sb-sep { color: var(--s-muted-2); }
.sb-crumb { color: var(--s-muted); font: 600 15px/1 var(--f-sans); }
.sb-crumb:hover { color: var(--s-text); }
.sb-spacer { flex: 1; }
.sb-btn { font: 600 14px/1 var(--f-sans); color: var(--s-text); background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.sb-btn:hover { border-color: var(--s-accent); }
.site-bar a:focus-visible, .sb-btn:focus-visible { outline: 3px solid var(--s-accent); outline-offset: 3px; border-radius: 6px; }

/* ---- site footer ---- */
.site-foot { border-top: 1px solid var(--s-line); margin: 48px 0 0; padding: 24px 0 8px; color: var(--s-muted); font: 400 14px/1.5 var(--f-sans); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.site-foot a { color: var(--s-muted); }
.site-foot a:hover { color: var(--s-text); }
.site-foot nav { display: flex; gap: 18px; }