@value (
  darkContentTextColor,
  lightContentTextColor,
  darkContentLinkColor,
  lightContentLinkColor
) from "pageflow-scrolled/values/colors.module.css";

.Section {
  position: relative;

  --section-max-width:
    var(--theme-section-max-width);

  --content-margin-fraction: var(--theme-content-margin-fraction, 0.08);
  --content-margin: var(--theme-content-margin, calc(var(--content-margin-fraction) * 100%));

  --two-column-inline-content-max-width:
    var(--theme-two-column-inline-content-max-width);
  --two-column-inline-lg-content-max-width:
    var(--theme-two-column-inline-lg-content-max-width);
  --two-column-inline-xl-content-max-width:
    var(--theme-two-column-inline-xl-content-max-width);

  --two-column-sticky-content-max-width:
    var(--theme-two-column-sticky-content-max-width);
  --two-column-sticky-lg-content-max-width:
    var(--theme-two-column-sticky-lg-content-max-width);
  --two-column-sticky-xl-content-max-width:
    var(--theme-two-column-sticky-xl-content-max-width);

  --centered-inline-content-max-width:
    var(--theme-centered-inline-content-max-width);
  --centered-inline-lg-content-max-width:
    var(--theme-centered-inline-lg-content-max-width);
  --centered-inline-xl-content-max-width:
    var(--theme-centered-inline-xl-content-max-width);

  --foreground-padding-top: 0px;
}

.first {
  /* Let content begin below navigation bar. Navigation bar has zero
     height to let first chapter start at the very top. */
  --foreground-padding-top: var(--theme-widget-margin-top, 58px);
}

.narrow {
  --section-max-width:
    var(--theme-narrow-section-max-width);

  --content-margin-fraction:
    var(--theme-narrow-section-content-margin-fraction, var(--theme-content-margin-fraction, 0.08));
  --content-margin:
    var(--theme-narrow-section-content-margin, calc(var(--content-margin-fraction) * 100%));

  --two-column-inline-content-max-width:
    var(--theme-narrow-section-two-column-inline-content-max-width);
  --two-column-inline-lg-content-max-width:
    var(--theme-narrow-section-two-column-inline-lg-content-max-width);
  --two-column-inline-xl-content-max-width:
    var(--theme-narrow-section-two-column-inline-xl-content-max-width);

  --two-column-sticky-content-max-width:
    var(--theme-narrow-section-two-column-sticky-content-max-width);
  --two-column-sticky-lg-content-max-width:
    var(--theme-narrow-section-two-column-sticky-lg-content-max-width);
  --two-column-sticky-xl-content-max-width:
    var(--theme-narrow-section-two-column-sticky-xl-content-max-width);

  --centered-inline-content-max-width:
    var(--theme-narrow-section-centered-inline-content-max-width);
  --centered-inline-lg-content-max-width:
    var(--theme-narrow-section-centered-inline-lg-content-max-width);
  --centered-inline-xl-content-max-width:
    var(--theme-narrow-section-centered-inline-xl-content-max-width);
}

.lightContent {
  composes: scope-lightContent from global;
}

.darkContent {
  composes: scope-darkContent from global;
}

@media screen {
  .lightContent {
    color: lightContentTextColor;
    --content-text-color: lightContentTextColor;
    --content-link-color: lightContentLinkColor;
    background-color: #000;
  }

  .darkContent {
    background-color: #fff;
    color: darkContentTextColor;
    --content-text-color: darkContentTextColor;
    --content-link-color: darkContentLinkColor;
  }
}
