@import url("/typography.css");
/*
 * Shared design tokens, brand mark, and button system for every static page
 * in fe/public/ (marketing homepage + SEO landing pages + legal/guide pages).
 * Every page links this file instead of re-declaring its own copy, so a
 * color/radius/font change only needs to happen once. Page-specific layout
 * (hero, cards, footer columns, etc.) stays in each page's own <style> block.
 */
:root {
  --bg: #F9FAFB;
  --fg: #1A1F2E;
  --fg-muted: #6B7280;
  --card: #FFFFFF;
  --accent: #5B52F6;
  --accent-hover: #5148DD;
  --accent-bg: #EEF0FE;
  --border: #E8EAEE;
  --radius: 4px;
  --radius-pill: 10px;

  /* Alias for an older per-page token name so this file is a drop-in
     replacement without having to rewrite every var(--muted) call site
     across 20 files. */
  --muted: var(--fg-muted);
}

/* ── Brand mark ──────────────────────────────────────────────────────── */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--fg);
}
.brand__mark {
  width: 32px;
  height: 32px;
  display: block;
  flex: none;
}
.brand__word {
  display: block;
  width: 91.904px;
  height: 28px;
  flex: none;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  font-family: var(--font-sans);
  letter-spacing: 0;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn.btn-primary {
  background: var(--accent);
  color: #FFFFFF;
  border: 0;
  text-align: center;
}
.btn.btn-primary:hover { background: var(--accent-hover); }
.btn.btn-primary:disabled,
.btn.btn-primary[aria-disabled="true"] {
  background: #E5E7EB;
  color: #9CA3AF;
  cursor: default;
}
.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--fg); }
.btn-invert {
  background: var(--bg);
  color: var(--fg);
}
.btn-invert:hover { background: var(--accent-bg); }
.btn-sm {
  height: 40px;
  padding: 0 20px;
}

/* ── Dark CTA panel (long-form guide articles) ──────────────────────────── */
.cta-panel {
  background: var(--fg);
  color: var(--bg);
  margin-top: 52px;
  padding: 30px;
}
.cta-panel h2 { color: var(--bg); margin: 0 0 10px; line-height: var(--line-heading); }
.cta-panel p { color: rgba(249,250,251,.7); }
.cta-panel .btn { margin-top: 8px; }

/* Actions use the same body role regardless of visual emphasis or width. */
.btn, .btn-sm { font-size: var(--text-body); line-height: var(--line-body); font-weight: var(--weight-medium); text-transform: none; }

/* Keep the standard text size readable on narrow article-page headers. */
@media (max-width: 480px) {
  header .container.nav { flex-wrap: wrap; padding-block: 12px; gap: 12px; }
  header .nav .links, header .nav .nav-links { flex-wrap: wrap; gap: 12px; max-width: 100%; }
}