/* Shared design 4 palette and content width for all pages using the B2B shell. */
.b2b-site-page {
  --bg: #fff;
  --graphite: #fff;
  --surface: #f3f6f8;
  --surface-2: #e8eef2;
  --panel: #fff;
  --line: #d5dde3;
  --line-soft: #dfe5e9;
  --text: #182128;
  --text-2: #58636d;
  --text-3: #6d7881;
  --muted: #58636d;
  --accent: #d63819;
  --accent-hot: #aa2b14;
  --accent-ink: #fff;
  --wrap: 1280px;
  --pad: 0px;
  --hdr-h: 0px;
  margin: 0;
  padding-top: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--f-body, "IBM Plex Sans", "Segoe UI", Arial, sans-serif);
}

html[data-theme="dark"] .b2b-site-page {
  --bg: #131a20;
  --graphite: #182128;
  --surface: #1b242b;
  --surface-2: #25313a;
  --panel: #182128;
  --line: #3b4953;
  --line-soft: #303d46;
  --text: #edf1f3;
  --text-2: #bdc8d0;
  --text-3: #9eabb4;
  --muted: #bdc8d0;
  --accent: #ff5733;
  --accent-hot: #ff7658;
  --accent-ink: #15191d;
}

.b2b-site-page .wrap {
  width: min(calc(100% - 64px), 1280px);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}
.b2b-site-page #main { min-width: 0; padding-top: 0; color: var(--text); background: var(--bg); }
.b2b-site-page :is(h1, h2, h3) { color: var(--text); }
.b2b-site-page :is(p, li, dd) { color: inherit; }
.b2b-site-page a { color: inherit; }
.b2b-site-page :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.b2b-site-page :is(input, select, textarea) { accent-color: var(--accent); }
.b2b-site-page :is(button, input, select, textarea):disabled { cursor: not-allowed; opacity: .58; }

/* Keep the plugin account, customer account and staff views legible in both themes. */
.b2b-site-page .bim-content {
  --bg: #fff;
  --panel: #fff;
  --line: #d5dde3;
  --text: #182128;
  --muted: #58636d;
  --accent: #d63819;
  color: var(--text);
  background: var(--bg);
}
html[data-theme="dark"] .b2b-site-page .bim-content {
  --bg: #131a20;
  --panel: #182128;
  --line: #3b4953;
  --text: #edf1f3;
  --muted: #bdc8d0;
  --accent: #ff5733;
}
html[data-theme="light"] .b2b-site-page .bim-content {
  --bg: #fff;
  --panel: #fff;
  --line: #d5dde3;
  --text: #182128;
  --muted: #58636d;
  --accent: #d63819;
  color: var(--text);
  background: var(--bg);
}
.b2b-site-page .bim-content :is(.auth-card, .workspace .card, .workspace .invoice, .workspace .model-panel, .workspace .feature-grid article, .workspace .pricing) {
  border-color: var(--line);
  border-radius: 6px;
  color: var(--text);
  background: var(--panel);
}
.b2b-site-page .bim-content :is(label, .fine, .section-note, .staff-mfa-hint, .number, .code, .model-caption) { color: var(--muted); }
.b2b-site-page .bim-content :is(input:not([type="checkbox"]), select, textarea) {
  border-color: var(--line);
  border-radius: 4px;
  color: var(--text);
  background: var(--panel);
}
.b2b-site-page .bim-content :is(.table-wrap th, .table-wrap td, .dashboard .card, .side-nav a) { border-color: var(--line); }
.b2b-site-page .bim-content .button:not(.secondary) { color: var(--accent-ink); background: var(--accent); }
.b2b-site-page .bim-content .button:not(.secondary):hover { color: var(--accent-ink); background: var(--accent-hot); }
.b2b-site-page .bim-content .button.secondary { border-color: var(--line); color: var(--text); background: var(--surface); }
.b2b-site-page .bim-content .text-link { color: var(--accent); }

@media (max-width: 759px) {
  .b2b-site-page .wrap { width: calc(100% - 32px); }
}

.b2b-site-page .btn--accent { color: var(--accent-ink); }
.b2b-site-page .btn--accent:hover { color: var(--accent-ink); }