@layer component.theme {
  .section {
    --section-color: light-dark(var(--bright), var(--dark));
    background: var(--section-color);
    color: contrast-color(var(--section-color));
  }

  .section--scheme_highlighted {
    --section-color: var(--highlight);
    color-scheme: light;
  }

  .section--scheme_light {
    --section-color: var(--surface);
    color-scheme: light;
  }

  .section--scheme_dark {
    color-scheme: dark;
  }
}