/* prolancer-marketing.css — public/marketing site on Prolancer tokens.
 * Loads AFTER marketing.css (wins). Step 1: remap --m-* to Prolancer tokens
 * (theme-aware). Later blocks override hardcoded colors + add chrome polish. */
:root{
  --m-bg:var(--bg); --m-surface:var(--surface-1);
  --m-text:var(--text-primary); --m-text-secondary:var(--text-secondary); --m-text-muted:var(--text-tertiary);
  --m-border:var(--border-subtle); --m-border-strong:var(--border-strong);
  --m-accent:var(--color-brand); --m-accent-soft:var(--color-brand-subtle);
  --m-radius:var(--radius-md); --m-radius-lg:var(--radius-card);
  --m-shadow:var(--shadow-sm); --m-shadow-lg:var(--shadow-lg);
  --m-serif:var(--font-display); --m-sans:var(--font-sans);
}

/* --cf-* remap: the .h-* marketing page bodies (home/about/packages/contact)
 * and any clientflow-token rules read these tokens DIRECTLY. Repointing them
 * to Prolancer tokens re-skins every .h-* body theme-aware in one shot.
 * Scoped to public/marketing pages — this sheet only loads via base_marketing.
 * Values are Prolancer tokens only, so nothing reads the clientflow palette
 * anymore; clientflow.css can be dropped from the shell in the retire slice. */
:root{
  --cf-font:var(--font-sans);
  --cf-bg:var(--bg);
  --cf-surface:var(--surface-1); --cf-surface-sunk:var(--surface-inset);
  --cf-text:var(--text-primary); --cf-text-primary:var(--text-primary);
  --cf-text-secondary:var(--text-secondary);
  --cf-text-muted:var(--text-tertiary); --cf-text-tertiary:var(--text-tertiary);
  --cf-border:var(--border-subtle); --cf-border-subtle:var(--border-subtle);
  --cf-border-strong:var(--border-strong);
  --cf-accent:var(--color-brand); --cf-accent-400:var(--color-brand);
}

/* ── Shell chrome ─────────────────────────────────────────────
 * Topbar, tools-menu, footer + body/container shell. Replaces every
 * hardcoded color with theme-aware Prolancer tokens. Layout untouched. */

/* Topbar */
.m-topbar{
  background:var(--surface-1);
  border-bottom:1px solid var(--border-subtle);
}
.m-topbar__brand{
  font-family:var(--font-display);
  color:var(--text-primary);
}
.m-topbar__nav a{ color:var(--text-secondary); }
.m-topbar__nav a:hover{ color:var(--text-primary); }
.m-topbar__login{ color:var(--text-secondary); }
.m-topbar__login:hover{ color:var(--text-primary); }
/* Mobile toggle bars */
.m-topbar__toggle{ border:1px solid var(--border-subtle); }
.m-topbar__toggle span{ background:var(--text-primary); }

/* Legacy topbar CTA override retired — topbar CTAs now use Prolancer
 * .btn--primary. Neutralize the old hardcoded indigo block so it can never
 * repaint a stray .btn-primary against the Prolancer chrome. */
.m-topbar__nav .btn-primary{
  background:var(--color-brand);
  color:var(--text-on-brand);
  border-radius:var(--radius-button);
  box-shadow:var(--shadow-sm);
}
.m-topbar__nav .btn-primary:hover{
  background:var(--color-brand-hover);
  color:var(--text-on-brand);
  box-shadow:var(--shadow-md);
}
.m-topbar__nav .btn-primary:active{
  background:var(--color-brand-active);
}

/* Tools menu (Free tools dropdown) */
.m-tools-menu__trigger{ color:var(--text-secondary); }
.m-tools-menu__trigger:hover{ color:var(--text-primary); }
.m-tools-menu__panel{
  background:var(--surface-1);
  border:1px solid var(--border-default);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-lg);
}
.m-tools-menu__panel::before{
  background:var(--surface-1);
  border-left:1px solid var(--border-default);
  border-top:1px solid var(--border-default);
}
.m-tools-menu__item{ color:var(--text-primary); }
.m-tools-menu__item strong{ color:var(--text-primary); }
.m-tools-menu__item span{ color:var(--text-tertiary); }
.m-tools-menu__item:hover{
  background:var(--surface-2);
  color:var(--text-primary);
}
.m-tools-menu__item:hover strong{ color:var(--text-primary); }

/* Footer */
.m-footer{
  background:var(--surface-2);
  border-top:1px solid var(--border-subtle);
}
.m-footer__col h4{ color:var(--text-secondary); }
.m-footer__col a{ color:var(--text-tertiary); }
.m-footer__col a:hover{ color:var(--text-primary); }
.m-footer__tag{ color:var(--text-tertiary); }
.m-footer__bottom{
  border-top:1px solid var(--border-subtle);
  color:var(--text-tertiary);
}
.m-footer__col strong{ color:var(--text-primary); }

/* ── Global atoms ─────────────────────────────────────────────
 * Shared, cross-page content atoms. Page-specific components
 * (tier/post/feature/team/form/testimonial cards) stay on marketing.css
 * until their own slices. Hardcoded colors → theme-aware Prolancer tokens. */

/* Buttons */
.m-btn{ border-radius:var(--radius-button); }
.m-btn--lg{ border-radius:var(--radius-button); }
.m-btn--primary{
  background:var(--color-brand);
  color:var(--text-on-brand);
}
.m-btn--primary:hover{
  background:var(--color-brand-hover);
  color:var(--text-on-brand);
}
.m-btn--ghost{
  color:var(--text-primary);
  border-color:var(--border-strong);
}
.m-btn--ghost:hover{
  background:var(--color-brand-subtle);
  border-color:var(--color-brand);
  color:var(--color-brand);
}

/* Sections + headings */
.m-section--alt{ background:var(--surface-2); }
.m-section__heading{ color:var(--text-primary); }
.m-section__sub{ color:var(--text-secondary); }
.m-eyebrow{ color:var(--color-brand); }

/* Hero + page hero */
.m-hero{ background:linear-gradient(180deg, var(--surface-2) 0%, transparent 100%); }
.m-hero__headline{ color:var(--text-primary); }
.m-hero__subheadline{ color:var(--text-secondary); }
.m-hero__trust{ color:var(--text-tertiary); }
.m-page-hero{ background:linear-gradient(180deg, var(--surface-2) 0%, transparent 100%); }
.m-page-hero__headline{ color:var(--text-primary); }
.m-page-hero__sub{ color:var(--text-secondary); }
.m-two-col__heading h2{ color:var(--text-primary); }

/* Prose (rich-text) */
.m-prose{ color:var(--text-secondary); }
.m-prose h2,
.m-prose h3{ color:var(--text-primary); }
.m-prose a{ color:var(--color-brand); }
.m-prose strong{ color:var(--text-primary); }

/* CTA band */
.m-cta-band{
  background:var(--gradient-brand);
  color:var(--text-on-brand);
}
.m-cta-band__heading{ color:var(--text-on-brand); }
.m-cta-band__sub{ color:var(--text-on-brand); opacity:.78; }
.m-cta-band .m-btn--primary{
  background:var(--surface-1);
  color:var(--color-brand);
}
.m-cta-band .m-btn--primary:hover{ background:var(--surface-2); }

/* Breadcrumbs */
.m-breadcrumbs{ color:var(--text-tertiary); }
.m-breadcrumbs a{ color:var(--text-secondary); }
.m-breadcrumbs a:hover{ color:var(--color-brand); }
.m-breadcrumbs__sep{ color:var(--border-strong); }

/* Pagination */
.m-pagination a, .m-pagination span{
  border:1px solid var(--border-subtle);
  background:var(--surface-1);
  color:var(--text-secondary);
}
.m-pagination a:hover{ color:var(--text-primary); border-color:var(--border-strong); }
.m-pagination .is-active{
  background:var(--color-brand);
  color:var(--text-on-brand);
  border-color:var(--color-brand);
}

/* Preview banner (draft/unpublished) — Prolancer warning tokens.
 * Body text is --text-primary (readable in both themes); the amber accent
 * lives on the border. Bright --warning as text on --warning-subtle is a
 * contrast fail (matches prolancer.css .banner--warning, which does the same). */
.m-preview-banner{
  background:var(--warning-subtle);
  border-bottom:1px solid var(--warning);
  color:var(--text-primary);
}

/* Empty state */
.m-empty{ color:var(--text-tertiary); }

/* ── Marketing body (.h-*) hardcoded-color overrides ──────────
 * The .h-* rules that read --cf-* are already re-skinned by the remap above.
 * These override the residual HARDCODED colors (indigo eyebrow/highlight,
 * near-black CTA band, green highlight, indigo focus ring) to theme-aware
 * Prolancer tokens. Layout/spacing/transforms untouched. */
.h-eyebrow{
  background:var(--color-brand-subtle);
  border-color:transparent;
  color:var(--color-brand);
}
.h-highlight{
  background:var(--color-brand);
  color:var(--text-on-brand);
  box-shadow:var(--shadow-md);
}
.h-highlight--alt{
  background:var(--success);
  box-shadow:var(--shadow-md);
}
/* CTA band: near-black gradient → Prolancer brand gradient (matches .m-cta-band) */
.h-cta-band{
  background:var(--gradient-brand);
  color:var(--text-on-brand);
}
.h-cta-band__heading{ color:var(--text-on-brand); }
/* Primary CTA sits on the brand band → surface chip with brand text */
.h-cta--primary{
  background:var(--surface-1);
  color:var(--color-brand);
  box-shadow:var(--shadow-md);
}
.h-cta--play{
  background:transparent;
  color:var(--text-on-brand);
  border-color:rgba(255,255,255,0.28);
}
.h-cta-play__icon{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.24);
  color:var(--text-on-brand);
}
.h-modal__input:focus{
  border-color:var(--color-brand);
  box-shadow:0 0 0 3px var(--color-brand-subtle);
}