/*
 * One colour system for CMS Resources articles.
 *
 * The public Knowledge Base and signed-in Help use the same published content
 * and the same .resource-article markup, but their surrounding pages load
 * different base stylesheets. Keep every colour used inside an article here so
 * the two shells cannot give the same guide a different meaning or emphasis.
 */
:where(
  .resource-article,
  .help-article-shell,
  .page-head:has(+ .help-article-shell),
  dialog.resource-image-viewer
) {
  --resource-article-ink: #1d1d1f;
  --resource-article-copy: #33333a;
  --resource-article-muted: #6e6e73;
  --resource-article-rule: #e2e4e8;
  --resource-article-rule-strong: #c9ccd2;
  --resource-article-accent: #0071e3;
  --resource-article-link: #0058b4;
  --resource-article-surface: #ffffff;
  --resource-article-surface-soft: #f5f6f8;
  --resource-article-information-background: #eef6ff;
  --resource-article-information-ink: #173b5f;
  --resource-article-warning-border: #b36a00;
  --resource-article-warning-background: #fff6e8;
  --resource-article-warning-ink: #62400d;
  --resource-article-success-border: #23824b;
  --resource-article-success-background: #ecf8f0;
  --resource-article-success-ink: #174d2d;
  --resource-article-divider: 1px solid var(--resource-article-rule);
  color: var(--resource-article-ink);
}

.resource-article :is(h2, h3) { color: var(--resource-article-ink); }
.resource-article p,
.resource-article :is(ul, ol):not(.article-steps) { color: var(--resource-article-copy); }
.resource-article a { color: var(--resource-article-link); }
.resource-article p[data-text-role="introduction"] { color: var(--resource-article-ink); }
.resource-article .article-steps > li::before { color: var(--resource-article-muted); }
.resource-article .resource-checklist > li::before { color: var(--resource-article-accent); }

.resource-article .article-callout {
  border-left-color: var(--resource-article-accent);
  background: var(--resource-article-information-background);
  color: var(--resource-article-information-ink);
}
.resource-article .article-callout.resource-callout-warning {
  border-left-color: var(--resource-article-warning-border);
  background: var(--resource-article-warning-background);
  color: var(--resource-article-warning-ink);
}
.resource-article .article-callout.resource-callout-success {
  border-left-color: var(--resource-article-success-border);
  background: var(--resource-article-success-background);
  color: var(--resource-article-success-ink);
}

.resource-article .resource-media figcaption { color: var(--resource-article-muted); }
.resource-article .resource-table :is(th, td) { border-color: var(--resource-article-rule); }
.resource-article .resource-table th {
  background: var(--resource-article-surface-soft);
  color: var(--resource-article-ink);
}
.resource-article .resource-article-section + .resource-article-section {
  border-color: var(--resource-article-rule);
}

.resource-article-meta {
  border-color: var(--resource-article-rule);
  color: var(--resource-article-muted);
}
.resource-article-meta strong { color: var(--resource-article-ink); }

.resource-article :is(.related-guide, .help-related-guides a) {
  border-color: var(--resource-article-rule);
  background: var(--resource-article-surface);
  color: var(--resource-article-ink);
}
.resource-article :is(.related-guide, .help-related-guides a):hover {
  border-color: var(--resource-article-rule-strong);
  background: var(--resource-article-surface-soft);
}
.resource-article :is(.related-guide, .help-related-guides a) small {
  color: var(--resource-article-muted);
}

/* The Help shell is different from the public article layout, but the parts
 * that explain and navigate the article use the same public palette. */
.page-head:has(+ .help-article-shell) .muted { color: var(--resource-article-copy); }
.help-back-link { color: var(--resource-article-link); }
.help-article-sidebar { border-top-color: var(--resource-article-copy); }
.help-article-sidebar a { color: var(--resource-article-muted); }
.help-article-sidebar a:hover,
.help-article-sidebar a[aria-current="location"] { color: var(--resource-article-link); }

/* The same image-viewer script opens article media in either shell. */
dialog.resource-image-viewer {
  border-color: var(--resource-article-rule);
  background: var(--resource-article-surface);
  color: var(--resource-article-ink);
}
.resource-image-viewer-head,
.resource-image-viewer-caption {
  border-color: var(--resource-article-rule);
  background: var(--resource-article-surface);
}
.resource-image-viewer-close {
  background: var(--resource-article-surface-soft);
  color: var(--resource-article-ink);
}
.resource-image-viewer-close:hover { background: var(--resource-article-rule); }
.resource-image-viewer-viewport { background: var(--resource-article-surface-soft); }
.resource-image-viewer-caption { color: var(--resource-article-muted); }