/* CapitalRaise design system. Loaded last by every product entry point.
   Tenant colors remain dynamic through --brand-accent and --brand-accent-contrast. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/InterVariable.woff2') format('woff2');
}
:root {
  --rl-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rl-color-ink: #1a1c1f;
  --rl-color-muted: #6b7280;
  --rl-color-line: #e5e7eb;
  --rl-color-paper: #ffffff;
  --rl-color-soft: #f7f7f8;
  --rl-color-accent: #2563eb;
  --rl-color-accent-hover: #1d4ed8;
  --rl-color-accent-soft: #eff6ff;
  --rl-action-hover: var(--rl-color-accent-hover);
  --rl-text-caption: 12px;
  --rl-text-small: 14px;
  --rl-text-body: 16px;
  --rl-text-card: 18px;
  --rl-text-section: 24px;
  --rl-text-page: 32px;
  --rl-text-display: clamp(44px, 4.5vw, 64px);
  --rl-text-marketing-section: clamp(32px, 3.4vw, 48px);
  --rl-radius-control: 10px;
  --rl-radius-card: 16px;
  --rl-space-1: 4px;
  --rl-space-2: 8px;
  --rl-space-3: 12px;
  --rl-space-4: 16px;
  --rl-space-6: 24px;
  --rl-space-8: 32px;
  --ink: var(--rl-color-ink);
  --dark: var(--rl-color-ink);
  --muted: var(--rl-color-muted);
  --line: var(--rl-color-line);
  --paper: var(--rl-color-paper);
  --white: var(--rl-color-paper);
  --soft: var(--rl-color-soft);
  --accent: var(--brand-accent, var(--rl-color-accent));
  --focus: var(--brand-accent, var(--rl-color-accent));
  --blue: var(--rl-color-accent);
  --blue-dark: var(--rl-color-accent-hover);
  --blue-soft: var(--rl-color-accent-soft);
  --sand: var(--rl-color-accent);
  --warm-ivory: var(--rl-color-paper);
  --warm-taupe: var(--rl-color-line);
  --warm-brown: var(--rl-color-muted);
  font-family: var(--rl-font-sans);
  font-synthesis: none;
  color: var(--ink);
  background: var(--paper);
}
:root[data-brand-source="workspace"], :root[data-brand-source="account"] {
  --rl-action-hover: color-mix(in srgb, var(--accent) 82%, #000);
}
body { font-family: var(--rl-font-sans); font-size: var(--rl-text-body); color: var(--ink); }
button, input, select, textarea { font-family: var(--rl-font-sans); }
:where(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:where(input[type=checkbox], input[type=radio], input[type=range]) { accent-color: var(--accent); }
.rl-hub, .rl-reports, .chat-home {
  --ink: var(--rl-color-ink); --muted: var(--rl-color-muted);
  --line: var(--rl-color-line); --paper: var(--rl-color-paper); --soft: var(--rl-color-soft);
  --lav: var(--rl-color-soft); --neutral-accent: var(--accent);
}
.rl-email, .settings-content .rl-email {
  --email-ink: var(--ink); --email-muted: var(--muted);
  --email-line: var(--line); --email-card: var(--paper); --email-taupe: var(--line);
}

/* Primary actions share one accent. Destructive and secondary actions stay distinct. */
.button-dark, #session-dialog .button-dark, .settings-content .button-dark,
.chat-home .rl-primary, .rl-primary, .rl-audience-card .rl-primary,
.rl-collateral-primary, .rl-compliance-primary, .rl-crm-button:not(.is-secondary),
.rl-offering-button-primary, .rl-post-button-primary, .rl-webinar-primary,
.rl-social-btn-primary, .rl-room-primary, .rl-email-primary,
.rl-prospect-campaign, .rl-prospect-search-button,
.rl-hub-ask button, .rl-hub-detail-actions .is-primary,
.rl-report-composer button {
  background: var(--accent); border-color: var(--accent);
  color: var(--brand-accent-contrast, #fff); font-weight: 600;
  border-radius: var(--rl-radius-control);
}
.button-dark:hover:not(:disabled), #session-dialog .button-dark:hover:not(:disabled),
.settings-content .button-dark:hover:not(:disabled), .chat-home .rl-primary:hover:not(:disabled),
.rl-primary:hover:not(:disabled), .rl-audience-card .rl-primary:hover:not(:disabled),
.rl-collateral-primary:hover:not(:disabled), .rl-compliance-primary:hover:not(:disabled),
.rl-crm-button:not(.is-secondary):hover:not(:disabled), .rl-offering-button-primary:hover:not(:disabled),
.rl-post-button-primary:hover:not(:disabled), .rl-webinar-primary:hover:not(:disabled),
.rl-social-btn-primary:hover:not(:disabled), .rl-room-primary:hover:not(:disabled),
.rl-email-primary:hover:not(:disabled), .rl-prospect-campaign:hover:not(:disabled),
.rl-prospect-search-button:hover:not(:disabled), .rl-hub-ask button:hover:not(:disabled),
.rl-hub-detail-actions .is-primary:hover:not(:disabled), .rl-report-composer button:hover:not(:disabled) {
  background: var(--rl-action-hover);
  border-color: var(--rl-action-hover);
  color: var(--brand-accent-contrast, #fff); filter: none;
}
:root:not([data-brand-source="workspace"]):not([data-brand-source="account"]) .button-dark:hover:not(:disabled) {
  background: var(--rl-color-accent-hover); border-color: var(--rl-color-accent-hover);
}
.chat-home .rl-send { background: var(--accent); color: var(--brand-accent-contrast, #fff); }
.chat-home .rl-send:hover:not(:disabled) { background: var(--rl-action-hover); }
.chat-home .rl-send:disabled { background: var(--line); color: #9ca3af; }
.settings-content .access-preference-row input:checked,
.settings-content .rl-module-row.is-active .rl-module-row__toggle { background: var(--accent); }
.settings-tabs a.active, .rl-compliance-tabs button.is-active {
  background: var(--brand-tint, var(--rl-color-accent-soft)); color: var(--accent);
}
.rl-social-tabs button.is-active, .rl-webinar-tabs button.is-active {
  color: var(--accent); border-bottom-color: var(--accent);
}
.audience-tabs a.active { color: var(--accent); }
.audience-tabs a.active:after, .rl-hub-nav .is-active:after { background: var(--accent); }
.rl-hub-nav .is-active { color: var(--accent); }
.rl-post-button:not(.rl-post-button-primary):hover,
.rl-post-voice-note, .rl-post-status,
.rl-compliance-status.changes-requested { background: var(--soft); color: var(--muted); }

/* A small, repeatable type scale across all product modules. */
.page-header h1, .campaign-workspace .page-header h1, .contact-heading h1,
.rl-hub-top h1, .rl-reports h1, .rl-post-header h1, .rl-offering-header h1,
.rl-marketing-library-head h2, .rl-readiness h1, .rl-delivery-head h1,
.marketing-page .rl-collateral-detail-head h2, .marketing-page .rl-webinar-detail-head h2,
.rl-social-heading h1, .rl-room-hero h1, .rl-room-detail h1,
.rl-webinar-hero h1, .rl-webinar-detail-head h1,
.rl-collateral-header h1, .rl-collateral-form-head h1, .rl-collateral-detail-head h1,
.marketing-page .rl-collateral-header h2, .marketing-page .rl-collateral-form-head h2,
.settings-content :is(.access-heading h2, .rl-modules__intro h2, .rl-ai-connections__intro h2,
.rl-crm-intro h2, .rl-branding-intro h2, .rl-brand-kit-intro h2, .rl-compliance-head h1,
.rl-billing-header h2, .settings-panel-heading h2, .rl-email-hero h1, .rl-email-hero h2) {
  font-size: var(--rl-text-page); font-weight: 600; line-height: 1.2;
  letter-spacing: -.035em; color: var(--ink);
}
.chat-home .rl-welcome h1 { font-size: var(--rl-text-page); font-weight: 600; line-height: 1.25; letter-spacing: -.035em; color: var(--ink); }
.campaign-workspace .campaign-section-header h2,
.rl-hub-hero h2, .rl-hub-section-head h2, .rl-post-plan-head h2,
.rl-social-planner-head h2, .rl-social-review-head h2, .rl-social-results-head h2,
.marketing-page .rl-room-section-head h2, .marketing-page .rl-webinar-section-head h2,
.marketing-page .rl-room-header h2, .marketing-page .rl-webinar-hero h2,
.rl-offering-form-head h2, .rl-report-welcome h2, .rl-readiness-panel h2,
.rl-social-editor-head h2, .rl-social-drawer h2, .rl-social-generate-dialog h2,
.rl-collateral-section-title h2, .rl-compliance-detail-head h2 {
  font-size: var(--rl-text-section); font-weight: 600; line-height: 1.3; letter-spacing: -.025em; color: var(--ink);
}
.card-heading h2, .panel-card .card-heading h2, .rl-hub-card h3,
.settings-content :is(.card-heading h2, .rl-compliance-card h2, .rl-email-card h2),
.rl-offering-card-title h3, .rl-post-task h3, .rl-webinar-card-copy h3,
.rl-crm-card h3, .rl-social-results-card h3, .contact-card h2,
.rl-marketing-library-card-body h3, .rl-delivery-card h2 {
  font-size: var(--rl-text-card); font-weight: 600; line-height: 1.4; letter-spacing: -.02em; color: var(--ink);
}
.settings-content :is(.access-heading p, .settings-panel-heading p, .rl-billing-header p,
.rl-crm-intro p, .rl-branding-intro p, .rl-brand-kit-intro p, .rl-ai-connections__lede,
.rl-modules__lede, .rl-email-hero p, .rl-compliance-lede), .rl-hub-subtitle {
  font-size: var(--rl-text-body); line-height: 1.6; color: var(--muted);
}
.settings-content .helper, .settings-content .card-heading p,
.settings-content .access-row-main span, .access-preference-row small { font-size: var(--rl-text-small); line-height: 1.6; color: var(--muted); }
.button, .settings-content .button,
:where(.rl-collateral-primary, .rl-collateral-light, .rl-compliance-primary,
.rl-compliance-secondary, .rl-crm-button, .rl-offering-button, .rl-post-button,
.rl-webinar-primary, .rl-webinar-light, .rl-social-btn, .rl-room-primary, .rl-room-light) {
  font-size: var(--rl-text-small); font-weight: 600; line-height: 1.4;
}

/* Public pages use the same palette/typeface, with display sizes for the larger canvas.
   Tiny product illustrations and generated client collateral keep their own scale. */
.marketing-site { background: var(--paper); }
.marketing-site .hero h1, .marketing-site .hero-with-teaser h1, .marketing-site .partner-hero h1 {
  font-size: var(--rl-text-display); font-weight: 600; line-height: 1.08; letter-spacing: -.045em;
}
.marketing-site :is(.section-heading h2, .connected-copy h2, .agency-copy h2,
.pricing-copy h2, .faq-heading h2, .final-cta h2, .partner-intro h2, .partner-photo-copy h2,
.partner-types .section-heading h2) {
  font-size: var(--rl-text-marketing-section); font-weight: 600; line-height: 1.15; letter-spacing: -.035em;
}
.marketing-site :is(.feature-copy h3, .connected-features h3, .partner-benefit h3,
.partner-types-grid h3, .people-caption h3) {
  font-size: var(--rl-text-section); font-weight: 600; line-height: 1.3; letter-spacing: -.025em;
}
.marketing-site :is(.section-heading>p, .feature-copy p, .connected-copy>p,
.connected-features p, .agency-copy>p, .pricing-copy>p, .faq-list p, .final-cta>p,
.partner-intro p, .partner-benefit p, .partner-types-grid p, .partner-photo-copy p,
.people-heading>p, .people-caption p) { font-size: var(--rl-text-body); line-height: 1.7; color: var(--muted); }
.marketing-site .hero-copy>p, .marketing-site .partner-hero-copy>p { color: var(--muted); }
.marketing-site :is(.hero-footnote, .price-note, .additional-price, .pricing-fine-print) { font-size: var(--rl-text-caption); line-height: 1.6; color: var(--muted); }
.marketing-site :is(.hero h1>span, .brand-period, .text-link, .desktop-nav a:hover, .login-link:hover) { color: var(--rl-color-accent); }
.marketing-site .status-dot { background: var(--rl-color-accent); box-shadow: 0 0 0 3px #2563eb16; }
.marketing-site .button-dark { background: var(--rl-color-accent); border-color: var(--rl-color-accent); color: #fff; }
.marketing-site .button-dark:hover:not(:disabled) { background: var(--rl-color-accent-hover); border-color: var(--rl-color-accent-hover); }

@media (max-width: 760px) {
  :root { --rl-text-page: 28px; --rl-text-section: 22px; }
  .marketing-site { --rl-text-display: 44px; --rl-text-marketing-section: 32px; }
}