/* ══════════════════════════════════════════════════════════════
   PropFirmChief — Design System v5
   Dark-mode-first, purple/magenta gradient headlines, saturated
   multi-color accent system. Modeled on the density and energy
   of data-dashboard-style prop firm comparison sites.
   ══════════════════════════════════════════════════════════════ */

:root {
  --bg:         #0A0B14 !important;
  --surface:    #141626 !important;
  --surface-2:  #1B1E33 !important;
  --border:     #2A2D45 !important;
  --text:       #F1F1F6 !important;
  --text-dim:   #94A3B8 !important;
  --text-mute:  #64687C !important;
  --purple:     #7C3AED !important;
  --magenta:    #D946EF !important;
  --green:      #10B981 !important;
  --green-dim:  #0F2E27 !important;
  --orange:     #F97316 !important;
  --orange-dim: #3A2211 !important;
  --blue:       #3B82F6 !important;
  --red:        #EF4444 !important;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-head: 'Inter Tight', 'Inter', sans-serif;

  --radius: 10px;
  --radius-lg: 16px;

  /* Retire every legacy variable name so old templates that still
     reference them (var(--brass), var(--slate) etc.) inherit the
     new system automatically instead of showing stale colors. */
  --ink:        #F1F1F6 !important;
  --ink-soft:   #C4C7D4 !important;
  --ink-muted:  #94A3B8 !important;
  --stone:      #94A3B8 !important;
  --stone-line: #2A2D45 !important;
  --paper:      #0A0B14 !important;
  --paper-alt:  #141626 !important;
  --brass:      #7C3AED !important;
  --brass-light:#1B1E33 !important;
  --jade:       #10B981 !important;
  --jade-light: #0F2E27 !important;
  --slate:      #0A0B14 !important;
  --slate-mid:  #141626 !important;
  --white:      #F1F1F6 !important;
}

* { box-sizing: border-box; }

html body {
  background: var(--bg) !important;
  color: var(--text-dim) !important;
  font-family: var(--font-body) !important;
}

/* ── Nav ── */
html body #pfh-header {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
html body .pfh-logo-words {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}
html body .pfh-logo-words strong {
  background: linear-gradient(90deg, var(--purple), var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html body .pfh-nav-list > li > a {
  color: var(--text-dim) !important;
  font-weight: 600 !important;
}
html body .pfh-nav-list > li > a:hover,
html body .pfh-nav-list > li.current-menu-item > a {
  color: var(--text) !important;
  background: var(--surface) !important;
}
html body .pfh-cta-btn, html body .pfh-nav-cta {
  background: linear-gradient(90deg, var(--purple), var(--magenta)) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 100px !important;
  font-weight: 700 !important;
  transition: transform .15s, box-shadow .15s !important;
}
html body .pfh-cta-btn:hover, html body .pfh-nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124,58,237,.4);
}

/* Announcement + ticker */
html body .pfh-announce { background: var(--surface) !important; color: var(--text-dim) !important; }
html body .pfh-announce a { color: var(--magenta) !important; }
html body .pfh-ticker-bar { background: var(--surface-2) !important; border-bottom: 1px solid var(--border) !important; }
html body .pfh-ticker-chip {
  border-radius: 100px !important;
  padding: 2px 10px !important;
  font-weight: 700 !important;
}
html body .pfh-chip-hot   { background: var(--orange) !important; color: #fff !important; }
html body .pfh-chip-new   { background: var(--green) !important; color: #fff !important; }
html body .pfh-chip-deal  { background: var(--purple) !important; color: #fff !important; }
html body .pfh-chip-warn  { background: var(--red) !important; color: #fff !important; }
html body .pfh-ticker-item { color: var(--text-dim) !important; }

/* Mobile nav */
html body .pfh-mobile-nav { background: var(--bg) !important; border-top-color: var(--purple) !important; }
html body .pfh-mobile-list > li > a { color: var(--text-dim) !important; }
html body .pfh-mobile-list > li.current-menu-item > a { color: var(--text) !important; }/* ── Global buttons ── */
html body .pfh-btn-brass,
html body .pfh-btn-primary,
html body .pfh-btn-hero-primary,
html body .fpr-btn-visit,
html body .fpr-hero-btn,
html body .fpr-btn-more {
  background: linear-gradient(90deg, var(--purple), var(--magenta)) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 100px !important;
  font-weight: 700 !important;
}
html body .pfh-btn-outline {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 100px !important;
}
html body .pfh-btn-outline:hover { border-color: var(--purple) !important; color: var(--purple) !important; }

/* Badges */
html body .pfh-badge-brass, html body .pfh-badge-jade {
  background: var(--green-dim) !important;
  border: 1px solid var(--green) !important;
  color: var(--green) !important;
  border-radius: 100px !important;
  padding: 3px 10px !important;
}

/* Score numbers, links */
html body .pfh-score-number, html body .pfh-score-val { color: var(--green) !important; }
html body a { color: var(--purple); }
html body a:hover { color: var(--magenta); }

/* Footer */
html body .pfh-footer, html body .pfh-footer-main, html body .pfh-footer-bottom {
  background: #060710 !important;
  border-top: 1px solid var(--border) !important;
}
html body .pfh-footer-col h4 { color: var(--text) !important; font-family: var(--font-head) !important; }
html body .pfh-footer-col ul li a { color: var(--text-mute) !important; }
html body .pfh-footer-col ul li a:hover { color: var(--magenta) !important; }
html body .pfh-footer-disclaimer { color: var(--text-mute) !important; }/* Newsletter sections sitewide */
html body .pfh-newsletter-section,
html body .fpr-nl-section {
  background: linear-gradient(135deg, var(--surface) 0%, #10071F 100%) !important;
}/* ══════════════════════════════════════════════════════════════
   Named fix for every hardcoded white-background component found
   across the theme's page templates. These never used CSS
   variables,
so the :root redefinition above cannot reach them —
   each is targeted by its exact class name below,
rather than a
   risky wildcard that could also flatten intentional colored v5
   module cards. Logo containers are intentionally excluded (a
   white backing helps most firm logos display correctly).
   ══════════════════════════════════════════════════════════════ */
html body .pfh-dropdown,
html body .pfh-trust-bar,
html body .pfh-firm-card,
html body .pfh-filter-bar,
html body .pfh-promo-card,
html body .pfh-review-cta-card,
html body .pfh-award-card,
html body .pfh-news-card,
html body .pfh-sidebar-widget,
html body .pfh-team-card,
html body .pfh-step,
html body .fpr-how-col,
html body .fpr-detail-row,
html body .fpr-grid-card,
html body .pfh-review-promo-code,
html body .pfh-promo-modal {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-dim) !important;
}
html body .fpr-firm-row {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}html body .fpr-alt-bg {
  background: var(--bg) !important;
}html body .pfh-filter-pill,
html body .fpr-filter {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-dim) !important;
}html body .fpr-btn-outline {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}html body .fpr-detail-promo {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-dim) !important;
}
html body .pfh-newsletter-form input,
html body .pfh-form-group textarea {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}/* Headings and body text inside every card above must also flip,
since the base theme set those with hardcoded dark colors meant
   for a light card — they'd be unreadable dark-on-dark otherwise. */
html body .pfh-promo-card h4,
html body .pfh-promo-card strong,
html body .pfh-award-card h3,
html body .pfh-award-card strong,
html body .pfh-team-card h3,
html body .pfh-step h3,
html body .fpr-how-col h3,
html body .fpr-detail-row h4,
html body .fpr-grid-card h4 {
  color: var(--text) !important;
}