/* Book Publishing Tools Online shared design system — brand fonts, colour tokens, and the unified
   top bar / menu used across every standalone tool page so they match the hub
   and in-app tools. Link this first; pages may still add page-specific styles. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,900&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  --paper: #eceae3;
  --surface: #ffffff;
  --surface-2: #f1efe8;
  --line: #d8d5cb;
  --ink: #23211d;
  --ink-soft: #595449;
  --accent: #4a6175;
  --accent-deep: #374c5d;
  --display: 'Fraunces', Georgia, serif;
  --ui: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  /* aliases so pages using the older token names share the same palette */
  --bg: var(--paper);
  --bg2: var(--surface-2);
  --surface2: var(--surface-2);
  --soft: var(--ink-soft);
  --accent-bright: var(--accent);
}

/* ---- unified top bar / menu ---- */
.app-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 10px 18px; background: var(--surface); border-bottom: 1px solid var(--line);
  font-family: var(--ui);
}
.app-brand { min-width: 0; display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: inherit; }
.app-brand b { font-family: var(--display); font-size: 19px; font-weight: 900; color: var(--ink); letter-spacing: .01em; }
.app-tag { font-size: 12.5px; color: var(--ink-soft); }
.app-spacer { margin-left: auto; }
.app-nav { display: flex; align-items: center; gap: 7px; }
.app-link {
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer;
}
.app-link:hover { color: #fff; background: var(--accent); border-color: var(--accent); }

@media (max-width: 560px) {
  .app-bar { padding: 9px 13px; gap: 8px; }
  .app-tag { display: none; }
  .app-brand b { font-size: 16px; line-height: 1.2; }
}