/* Shared product colors: one blue accent and consistent text hierarchy. */
:root {
  --brand: #3568e8;
  --brand-hover: #2958ce;
  --brand-active: #2049b1;
  --text-heading: #182230;
  --text-body: #475467;
  --text-muted: #667085;
  --text-inverse: #ffffff;
  --status-warning: #946200;
  --status-error: #b42318;
  --blue: var(--brand);
  --deep: #172b4d;
  --ink: var(--text-heading);
  --muted: var(--text-muted);
  --line: #e4eaf2;
  --bg: #f7f9fc;
  --soft: #edf3ff;
  --paper: #ffffff;
  --canvas: var(--bg);
  --green: var(--brand);
  --green-2: var(--brand-hover);
  --green-soft: var(--soft);
  --button-primary: var(--brand);
  --button-primary-hover: var(--brand-hover);
  --button-primary-active: var(--brand-active);
  --button-text: var(--brand);
  --button-border: #d8e2f3;
  --button-soft: var(--soft);
  --button-soft-hover: #e3edff;
  --button-focus: #7ba0ef;
}

.btn,
.icon-btn {
  color: var(--button-text);
  background: #fff;
  border-color: var(--button-border);
  box-shadow: none;
  filter: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn:hover,
.icon-btn:hover {
  color: var(--button-text);
  background: var(--button-soft);
  border-color: #b5c9ee;
  box-shadow: none;
  transform: none;
  filter: none;
}

.btn.primary,
.btn.dark,
.hero .btn.primary {
  color: #fff;
  background: var(--button-primary);
  border-color: var(--button-primary);
  box-shadow: none;
  filter: none;
}

.btn.primary:hover,
.btn.dark:hover,
.hero .btn.primary:hover {
  color: #fff;
  background: var(--button-primary-hover);
  border-color: var(--button-primary-hover);
  box-shadow: none;
  transform: none;
  filter: none;
}

.btn.primary:active,
.btn.dark:active,
.hero .btn.primary:active {
  background: var(--button-primary-active);
  border-color: var(--button-primary-active);
}

.btn.soft,
.btn.ghost,
.hero .btn.ghost {
  color: var(--button-text);
  background: var(--button-soft);
  border-color: var(--button-border);
}

.btn.soft:hover,
.btn.ghost:hover,
.hero .btn.ghost:hover {
  color: var(--button-text);
  background: var(--button-soft-hover);
  border-color: #b5c9ee;
}

.btn.danger {
  color: var(--status-error);
  background: #fff3f1;
  border-color: #f0d5d1;
}

.btn.danger:hover {
  color: #912018;
  background: #ffe9e5;
  border-color: #e4b4ad;
}

.tab,
.filter-tab,
.topic-option {
  color: var(--text-body);
  border-color: var(--button-border);
}

.tab:hover,
.filter-tab:hover,
.topic-option:hover {
  color: var(--button-text);
  background: var(--button-soft);
}

.tab.active,
.filter-tab.active,
.article-toolbar .tab.active,
.topic-option.active {
  color: var(--brand);
  background: var(--soft);
  border-color: #b5c9ee;
}

.step.active b {
  color: #fff;
  background: var(--button-primary);
}

.btn:focus-visible,
.icon-btn:focus-visible,
.tab:focus-visible,
.filter-tab:focus-visible,
.topic-option:focus-visible,
.mobile-toggle:focus-visible,
.modal-close:focus-visible {
  outline: 3px solid var(--button-focus);
  outline-offset: 3px;
}

.btn:disabled,
.btn:disabled:hover,
.hero .btn:disabled,
.hero .btn:disabled:hover {
  color: #6f7e94;
  background: #edf1f6;
  border-color: #dce3ed;
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  filter: none;
}

/* Text rules shared by landing pages, content, tools, account and operations. */
.site-public { color: var(--text-body); }
.site-public h1, .site-public h2, .site-public h3,
.site-public .brand strong, .site-public .journey-top strong,
.site-public .journey-row strong, .site-public .stat strong,
.site-public .reading-cta strong, .site-public .order-header strong {
  color: var(--text-heading);
}
.site-public .brand small,
.site-public .hero p.brand-slogan,
.site-public .auth p.auth-slogan { color: var(--text-body); }
.site-public .nav a { color: var(--text-body); }
.site-public .nav a.active,
.site-public .text-link,
.site-public .auth .switch a,
.site-public .article-meta .category,
.site-public .trial .price,
.site-public .media-card .price,
.site-public .journey-bottom b,
.site-public .order-total strong { color: var(--brand); }
.site-public .text-link:hover,
.site-public .auth .switch a:hover { color: var(--brand-hover); }
.site-public .article-cover,
.site-public .article-cover.violet,
.site-public .article-cover.teal,
.site-public .article-cover.orange {
  color: var(--brand);
  background: var(--soft);
}
.site-public .step-icon { color: var(--brand); background: var(--soft); }
.site-public .badge.gray { color: var(--text-muted); background: #f0f3f7; }
.site-public .badge.orange,
.site-public .notice.warning,
.site-public .order-note { color: var(--status-warning); }
.site-public .inline-error,
.site-public .notice.error,
.site-public .required { color: var(--status-error); }
.site-public input::placeholder,
.site-public textarea::placeholder { color: var(--text-muted); opacity: 1; }
.site-public .search { color: var(--text-muted); }
.site-public .field { color: var(--text-body); }
.site-public .field input,
.site-public .field textarea,
.site-public .field select,
.site-public .input { color: var(--text-heading); }
.site-public a:focus-visible,
.site-public input:focus-visible,
.site-public textarea:focus-visible,
.site-public select:focus-visible { outline-color: var(--button-focus); }
.site-public .check input { accent-color: var(--brand); }
.site-public .article-card footer,
.site-public .article-card p,
.site-public .article-meta,
.site-public .footer,
.site-public .tiny-note,
.site-public .section-heading p,
.site-public .page-head p { color: var(--text-muted); }
.legacy-studio .sidebar { background: var(--deep); }
.legacy-studio .hero { background: var(--deep); }
.legacy-studio .brand-mark { color: var(--brand); background: var(--soft); }
.legacy-studio .main-area p,
.legacy-studio .main-area label { color: var(--text-body); }
.legacy-studio .main-area .hero p { color: #d9e4f7; }
.site-public .article-toolbar .tab { color:var(--text-body); background:transparent; }
.site-public .article-toolbar .tab:hover { color:var(--brand); background:var(--soft); }
.site-public .article-toolbar .tab.active { color:var(--brand); background:transparent; box-shadow:inset 0 -2px var(--brand); }