/* ————————————————————————————————————————————————
   NewSiteLead 2026 — compat-alias layer
   Retarget legacy main.css CSS-vars to the new editorial palette
   so un-ported BEM templates (site_detail, dashboard, account/*,
   blog_post, diagnostic_*, legal pages) inherit the new look
   without us touching every file.

   Load order: tokens.css → app.css → main.css → this file
   Every rule is !important because main.css owns the :root.
   ———————————————————————————————————————————————— */

:root {
  /* Core surfaces */
  --bg-primary: #F7F4EE !important;          /* paper */
  --bg-secondary: #EFE9DC !important;        /* paper-2 */
  --bg-card: #FFFFFF !important;             /* surface */
  --bg-card-hover: #EFE9DC !important;
  --bg-glass: #FFFFFF !important;
  --bg-glass-border: #E3DED2 !important;     /* rule */
  --bg-input: #FFFFFF !important;
  --bg-input-focus: #FFFFFF !important;

  /* Ink / typography */
  --text-primary: #0F1E3D !important;
  --text-secondary: #1B2B4E !important;
  --text-muted: #667591 !important;
  --text-heading: #0F1E3D !important;

  /* Accent */
  --accent-blue: #0F1E3D !important;
  --accent-blue-hover: #1B2B4E !important;
  --accent-warm: #A8802C !important;
  --accent-gradient: #0F1E3D !important;
  --accent-gradient-text: #A8802C !important;

  /* Semantic */
  --severity-critical: #B5322A !important;
  --severity-critical-bg: #F3D9D6 !important;
  --severity-major: #B8791D !important;
  --severity-major-bg: #F6E5C3 !important;
  --severity-minor: #A8802C !important;
  --severity-minor-bg: #F3E8C9 !important;
  --severity-good: #2F7A4D !important;
  --severity-good-bg: #D8ECDE !important;

  /* Radius / shadow — flatten to editorial */
  --radius-sm: 0 !important;
  --radius-md: 0 !important;
  --radius-lg: 0 !important;
  --shadow-sm: none !important;
  --shadow-md: none !important;
  --shadow-lg: 0 0 0 1px #0F1E3D !important;

  /* Fonts — override on legacy templates too */
  --font-stack: "Newsreader", "Source Serif Pro", Georgia, serif !important;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif !important;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

/* Body base — the alias above handles most of this already but some
   legacy templates use hardcoded white/grey so we nudge them. */
body {
  background: #F7F4EE !important;
  color: #0F1E3D !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Headings — serif display across legacy templates */
h1, h2, h3, h4, h5 {
  font-family: "Newsreader", "Source Serif Pro", Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: #0F1E3D !important;
}

/* Buttons — flatten gradients + square corners */
.btn {
  border-radius: 0 !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  box-shadow: none !important;
  transition: all 120ms ease !important;
}
.btn--primary,
.btn--primary:link,
.btn--primary:visited {
  background: #0F1E3D !important;
  color: #F7F4EE !important;
  border: 1px solid #0F1E3D !important;
  box-shadow: none !important;
  transform: none !important;
}
.btn--primary:hover {
  background: #1B2B4E !important;
  color: #F7F4EE !important;
  transform: none !important;
  box-shadow: none !important;
}
.btn--secondary {
  background: transparent !important;
  color: #0F1E3D !important;
  border: 1px solid #0F1E3D !important;
}
.btn--secondary:hover {
  background: #0F1E3D !important;
  color: #F7F4EE !important;
}
.btn--outline {
  background: transparent !important;
  color: #0F1E3D !important;
  border: 1px solid #0F1E3D !important;
}
.btn--outline:hover {
  background: #0F1E3D !important;
  color: #F7F4EE !important;
}

/* Cards — flat editorial panels instead of rounded/shadowed boxes */
.card,
.card--featured,
.pricing__card,
.site-header-card {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid #E3DED2 !important;
  background: #FFFFFF !important;
}
.card--featured {
  background: #0F1E3D !important;
  color: #F7F4EE !important;
  border-color: #0F1E3D !important;
}
.card--featured h1,
.card--featured h2,
.card--featured h3,
.card--featured h4,
.card--featured .pricing__price {
  color: #F7F4EE !important;
}
.card--featured::before {
  background: #A8802C !important;
  color: #1a1206 !important;
  border-radius: 0 !important;
  font-family: "JetBrains Mono", monospace !important;
  letter-spacing: 0.12em !important;
  font-weight: 500 !important;
}

/* Form inputs */
.form-input,
.form-label + input,
.form-label + select,
.form-label + textarea {
  border-radius: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid #E3DED2 !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 13px !important;
  color: #0F1E3D !important;
}
.form-input:focus,
.form-label + input:focus {
  border-color: #0F1E3D !important;
  box-shadow: none !important;
  outline: 2px solid #A8802C !important;
  outline-offset: 2px !important;
  background: #FFFFFF !important;
}

/* Badges */
.badge {
  border-radius: 0 !important;
  font-family: "JetBrains Mono", monospace !important;
  letter-spacing: 0.08em !important;
}

/* Tables */
.leads-table th {
  background: #EFE9DC !important;
  color: #667591 !important;
  font-family: "JetBrains Mono", monospace !important;
  letter-spacing: 0.1em !important;
  border-bottom: 1px solid #0F1E3D !important;
  border-top: 1px solid #0F1E3D !important;
}
.leads-table td {
  border-bottom: 1px solid #E3DED2 !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 12px !important;
}
.domain-link {
  color: #0F1E3D !important;
  font-weight: 500 !important;
}
.tld-badge {
  border-radius: 0 !important;
  background: #EFE9DC !important;
  font-family: "JetBrains Mono", monospace !important;
  letter-spacing: 0.04em !important;
}

/* Stat cards */
.stat-card {
  border: 1px solid #E3DED2 !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
}
.stat-card__number {
  font-family: "Newsreader", serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}
.stat-card__label {
  font-family: "JetBrains Mono", monospace !important;
  letter-spacing: 0.12em !important;
}

/* Section helpers */
.section-label {
  color: #A8802C !important;
  font-family: "JetBrains Mono", monospace !important;
  letter-spacing: 0.14em !important;
  font-weight: 500 !important;
  font-size: 11px !important;
}
.section--alt {
  background: #EFE9DC !important;
  border-color: #E3DED2 !important;
}

/* Hero */
.hero__badge {
  background: #F3E8C9 !important;
  border: 1px solid #A8802C !important;
  border-radius: 0 !important;
  color: #0F1E3D !important;
  font-family: "JetBrains Mono", monospace !important;
  letter-spacing: 0.1em !important;
  font-size: 11px !important;
}
.hero__title {
  font-family: "Newsreader", serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.02 !important;
}

/* Step circles → flat squares */
.step__number {
  border-radius: 0 !important;
  background: #0F1E3D !important;
  color: #A8802C !important;
  font-family: "JetBrains Mono", monospace !important;
  box-shadow: none !important;
}

/* Text utilities */
.text-gradient {
  background: none !important;
  -webkit-text-fill-color: #A8802C !important;
  color: #A8802C !important;
  font-style: italic !important;
}

/* Blurred preview — upgrade the overlay to be editorial */
.blurred-preview {
  border-radius: 0 !important;
  border: 1px solid #0F1E3D !important;
}
.blurred-preview__content {
  border-radius: 0 !important;
  background: #FFFFFF !important;
  border: 0 !important;
}
.blurred-preview__overlay {
  border-radius: 0 !important;
  background: rgba(247, 244, 238, 0.78) !important;
}

/* Breadcrumb */
.breadcrumb__list {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #667591 !important;
}
.breadcrumb__item a {
  color: #667591 !important;
}
.breadcrumb__item a:hover {
  color: #A8802C !important;
}

/* Alert */
.alert {
  border-radius: 0 !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
}

/* Site header + nav — killed the backdrop-blur+white, replaced with
   crisp paper + ink bottom border matching the topbar in app.css */
.site-header {
  background: #F7F4EE !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid #0F1E3D !important;
  box-shadow: none !important;
}
.nav__logo {
  color: #0F1E3D !important;
  font-family: "Newsreader", serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}
.nav__logo-icon {
  background: #0F1E3D !important;
  color: #A8802C !important;
  border-radius: 0 !important;
}
.nav__links a {
  font-family: "Inter", sans-serif !important;
  color: #0F1E3D !important;
  border-radius: 0 !important;
}
.nav__links a:hover {
  background: #EFE9DC !important;
  color: #0F1E3D !important;
}

/* Footer — carry editorial palette through */
.site-footer {
  background: #EFE9DC !important;
  border-top: 1px solid #0F1E3D !important;
  color: #0F1E3D !important;
  font-family: "Inter", sans-serif !important;
}
.footer__copy {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  color: #667591 !important;
}
.footer__links a {
  color: #0F1E3D !important;
  font-size: 12px !important;
}
.footer__links a:hover {
  color: #A8802C !important;
}

/* Global links */
a {
  color: #0F1E3D !important;
}
a:hover {
  color: #A8802C !important;
}
/* But preserve no-color for intentional inline white-on-dark etc. */
.btn--primary, .btn--primary:hover,
.card--featured a {
  color: #F7F4EE !important;
}

/* Pricing tier eyebrow */
.pricing__tier {
  font-family: "JetBrains Mono", monospace !important;
  letter-spacing: 0.14em !important;
  color: #A8802C !important;
  font-weight: 500 !important;
}
.pricing__price {
  font-family: "Newsreader", serif !important;
  font-weight: 500 !important;
}

/* Issue items */
.issue-item {
  border-bottom: 1px solid #E3DED2 !important;
}
.issue-item__title {
  font-family: "Newsreader", serif !important;
  font-weight: 500 !important;
}

/* ————————————————————————————————————————————————
   Button link-text color fix (2026-04-19 regression)
   The global `a { color: #0F1E3D !important }` rule above was
   beating the editorial `.btn.primary { color: var(--paper) }`
   rule from tokens.css (not !important). Anchor-tags using the
   editorial button pattern (`<a class="btn primary">`,
   `<a class="btn gold">`, `<a class="btn ghost">`) were rendering
   with navy text on navy/gold backgrounds — invisible.
   Re-assert cream/dark text with specificity + !important.
   ———————————————————————————————————————————————— */

/* Solid navy button (cream text) */
a.btn.primary,
a.btn.primary:link,
a.btn.primary:visited,
a.btn.primary:hover,
a.btn.primary:focus {
  color: #F7F4EE !important;
}

/* Gold button (dark text on gold) */
a.btn.gold,
a.btn.gold:link,
a.btn.gold:visited,
a.btn.gold:hover,
a.btn.gold:focus {
  color: #1a1206 !important;
}

/* Ghost / default btn HOVER state fills navy, so text must flip cream */
a.btn:hover,
a.btn.ghost:hover,
a.btn.sm:hover {
  color: #F7F4EE !important;
}
/* But keep the resting-state colors for ghost/default/sm intact */
a.btn:link:not(.primary):not(.gold),
a.btn:visited:not(.primary):not(.gold),
a.btn.ghost:link,
a.btn.ghost:visited,
a.btn.sm:link:not(.primary):not(.gold),
a.btn.sm:visited:not(.primary):not(.gold) {
  color: #0F1E3D !important;
}
/* But gold ghost-hover is still gold-styled */
a.btn.gold:hover { color: #1a1206 !important; }
a.btn.primary:hover { color: #F7F4EE !important; }