/*
 * Document typography — the single owner of base type for the interface.
 *
 * Bootstrap ships its own heading ramp (h1 = 2.5rem, system font stack). This
 * file loads after it and replaces that ramp with the product pairing from the
 * token layer: Source Serif for titles, Inter for everything operational.
 *
 * RichContentStyle boundary: author-written lesson HTML is a document, not
 * chrome. Every rule below is filtered through :not(:where(<content roots>) *),
 * so headings, links and code inside a lesson block keep exactly the rendering
 * they had before the interface got its own type. The :where() wrapper
 * contributes no specificity, so these selectors still weigh the same as a bare
 * element selector and never outrank a component class.
 */

body {
  color: var(--ui-text-primary);
  font-family: var(--ui-font-body);
  font-size: var(--ui-font-size-md);
  font-feature-settings: "kern" 1, "liga" 1;
  font-optical-sizing: auto;
  line-height: var(--ui-font-line-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Author content keeps its own reading face and inherits nothing from the
   interface stack. */
.wysiwyg-viewer,
.text-block-content {
  font-family: var(--ui-font-content);
}

h1:not(:where(.wysiwyg-viewer, .text-block-content) *),
h2:not(:where(.wysiwyg-viewer, .text-block-content) *),
h3:not(:where(.wysiwyg-viewer, .text-block-content) *),
h4:not(:where(.wysiwyg-viewer, .text-block-content) *),
h5:not(:where(.wysiwyg-viewer, .text-block-content) *),
h6:not(:where(.wysiwyg-viewer, .text-block-content) *),
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--ui-text-primary);
  font-weight: var(--ui-font-weight-semibold);
  letter-spacing: var(--ui-font-tracking-tight);
  line-height: var(--ui-font-line-tight);
  text-wrap: balance;
}

/* Titles carry the serif; h4 and below stay in the UI face so dense cabinet
   cards and form legends keep reading as interface, not as an article. */
h1:not(:where(.wysiwyg-viewer, .text-block-content) *),
h2:not(:where(.wysiwyg-viewer, .text-block-content) *),
h3:not(:where(.wysiwyg-viewer, .text-block-content) *),
.h1,
.h2,
.h3 {
  font-family: var(--ui-font-heading);
}

h4:not(:where(.wysiwyg-viewer, .text-block-content) *),
h5:not(:where(.wysiwyg-viewer, .text-block-content) *),
h6:not(:where(.wysiwyg-viewer, .text-block-content) *),
.h4,
.h5,
.h6 {
  font-family: var(--ui-font-body);
  line-height: var(--ui-font-line-snug);
}

h1:not(:where(.wysiwyg-viewer, .text-block-content) *),
.h1 {
  font-size: var(--ui-font-size-3xl);
}

h2:not(:where(.wysiwyg-viewer, .text-block-content) *),
.h2 {
  font-size: var(--ui-font-size-2xl);
}

h3:not(:where(.wysiwyg-viewer, .text-block-content) *),
.h3 {
  font-size: var(--ui-font-size-xl);
}

h4:not(:where(.wysiwyg-viewer, .text-block-content) *),
.h4 {
  font-size: var(--ui-font-size-lg);
}

h5:not(:where(.wysiwyg-viewer, .text-block-content) *),
.h5 {
  font-size: var(--ui-font-size-md);
}

h6:not(:where(.wysiwyg-viewer, .text-block-content) *),
.h6 {
  font-size: var(--ui-font-size-sm);
}

/* Figures in product tables, stats and grades must not shift column width as
   values change. Author tables keep their own metrics. */
.ui-table,
[data-tabular-nums] {
  font-variant-numeric: tabular-nums;
}

/* Links follow the product accent. Bootstrap's own ramp is bridged separately
   in css/utilities.css; this rule covers anchors it does not reach. */
a:not(:where(.wysiwyg-viewer, .text-block-content) *) {
  color: var(--ui-color-action-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:not(:where(.wysiwyg-viewer, .text-block-content) *):hover {
  color: var(--ui-color-action-hover);
}

::selection {
  background: var(--ui-color-action-muted);
  color: var(--ui-text-primary);
}

@media (max-width: 576px) {
  html[data-mobile-native-scale="1"] h1:not(:where(.wysiwyg-viewer, .text-block-content) *),
  html[data-mobile-native-scale="1"] .h1 {
    font-size: var(--ui-font-size-2xl);
  }

  html[data-mobile-native-scale="1"] h2:not(:where(.wysiwyg-viewer, .text-block-content) *),
  html[data-mobile-native-scale="1"] .h2 {
    font-size: var(--ui-font-size-xl);
  }
}