/*
 * Northbeams marketing-site shared design tokens.
 *
 * Every top-level marketing page (index, pricing, persona pages, legal,
 * etc.) used to inline this :root block. That meant a token change
 * meant editing 20 files, and any drift went unnoticed.
 *
 * Pages now <link> this stylesheet and only their page-specific styles
 * stay inline. Tokens are authoritative here.
 *
 * Note: app/src/app/globals.css (the dashboard's Tailwind theme) holds
 * the same colors prefixed --color-*. Keep both in sync if you change
 * a hex value here.
 */

:root {
  /* Navy palette - dark backgrounds, hero, footer */
  --navy-900: #07101F;
  --navy-800: #0B1733;
  --navy-700: #122348;
  --navy-600: #1B3160;

  /* Beam - the gold accent. The product's name and the only saturated color. */
  --beam-500: #F5B53C;
  --beam-400: #FFC861;
  --beam-300: #FFE0A3;
  --beam-50:  #FFF8E8;

  /* Ink - text + borders, light to dark scale */
  --ink-900: #0B1733;
  --ink-700: #2C3A56;
  --ink-500: #5A6781;
  --ink-400: #8893AB;
  --ink-300: #B6BED0;
  --ink-200: #D9DEE8;
  --ink-100: #ECEFF5;
  --ink-50:  #F6F8FB;
  --paper:   #FBFBF9;

  /* Status colors - used on pricing/contact for inline state messaging */
  --ok-green: #2F7A4D;
  --err-red:  #C03434;

  /* Type families - load via Google Fonts on each page */
  --serif: "IBM Plex Sans", system-ui, sans-serif;
  --sans:  "Inter", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;
}

/*
 * ===== Marketing-site topbar =====
 * Shared header used by every root-level *.html page. The markup is
 * regenerated from partials/header.html by scripts/build-header.mjs.
 * Edit the partial + CSS here; do not redefine these selectors inline.
 */

.topbar {
  background: var(--navy-800);
  padding: 18px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .topbar-inner { padding-left: 24px; padding-right: 24px; }
}

/* .logo applies to both the topbar logo and the footer logo. */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo svg { display: block; }

.topbar-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-200);
}
.topbar-meta a {
  color: var(--ink-200);
  text-decoration: none;
  transition: color 0.15s ease;
}
.topbar-meta a:hover { color: #fff; }
.topbar-meta a.current { color: var(--beam-500); }
.topbar-meta a.signin {
  color: #fff;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
}
.topbar-meta a.signin:hover {
  border-color: var(--beam-500);
  color: var(--beam-500);
}
.topbar-meta a.cta-header {
  background: var(--beam-500);
  color: var(--navy-900);
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: 600;
}
.topbar-meta a.cta-header:hover {
  background: var(--beam-400);
  color: var(--navy-900);
}
@media (max-width: 720px) {
  .topbar-meta a.cta-header { display: none; }
}